/* ============================================================
   HIRSCH 2026 redesign — modern, premium e-commerce experience
   Scoped where possible; otherwise namespaced under .hp-redesign
   Loaded AFTER stylesheet.css so these win on conflict
   ============================================================ */

:root {
  /* Brand palette — kept from the existing site */
  --hp-green: #43a137;
  --hp-green-dark: #388631;
  --hp-green-darker: #2b6a26;
  --hp-green-soft: #e8f4e7;

  /* Accents (carry over from existing resource cards) */
  --hp-blue: #24aae1;
  --hp-navy: #063a5a;
  --hp-purple: #652d91;
  --hp-gold: #fbb03f;

  /* Neutrals — modern e-commerce greys */
  --hp-ink: #111418;
  --hp-ink-2: #2a2f36;
  --hp-text: #4a5260;
  --hp-text-muted: #6b7280;
  --hp-line: #e6e8ec;
  --hp-line-2: #f1f2f4;
  --hp-surface: #ffffff;
  --hp-surface-2: #f8f9fb;
  --hp-surface-3: #f1f2f4;

  /* Shadows */
  --hp-shadow-sm: 0 1px 2px rgba(17, 20, 24, 0.04), 0 1px 1px rgba(17, 20, 24, 0.03);
  --hp-shadow: 0 4px 14px rgba(17, 20, 24, 0.06), 0 1px 3px rgba(17, 20, 24, 0.04);
  --hp-shadow-lg: 0 18px 50px rgba(17, 20, 24, 0.10), 0 8px 20px rgba(17, 20, 24, 0.06);
  --hp-shadow-xl: 0 30px 80px rgba(17, 20, 24, 0.14), 0 12px 30px rgba(17, 20, 24, 0.08);

  /* Radii */
  --hp-radius-sm: 6px;
  --hp-radius: 10px;
  --hp-radius-lg: 16px;
  --hp-radius-xl: 22px;

  /* Spacing */
  --hp-section-y: clamp(48px, 6vw, 88px);
}

/* ============================================================
   Base typography refresh (home page only — opt-in via #common-home)
   ============================================================ */
#common-home {
  font-family: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hp-text);
  background: var(--hp-surface);
}

#common-home h1,
#common-home h2,
#common-home h3,
#common-home h4 {
  color: var(--hp-ink);
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* ============================================================
   Reusable section header pattern used across redesigned sections
   ============================================================ */
.hp-section {
  padding-top: var(--hp-section-y);
  padding-bottom: var(--hp-section-y);
  position: relative;
}
.hp-section--tight {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.hp-section--surface {
  background: var(--hp-surface-2);
}
.hp-section--dark {
  background: var(--hp-navy);
  color: rgba(255, 255, 255, 0.86);
}
.hp-section--dark .hp-section-head h2 { color: #fff; }
.hp-section--dark .hp-section-head p { color: rgba(255, 255, 255, 0.72); }
.hp-section--dark .hp-section-head .hp-eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

/* Section-by-section backgrounds — alternating so each block has visual separation. */
.hp-featured-brands { background: var(--hp-surface); }
.hp-categories      { background: var(--hp-surface-2); }
/* Shop By Theme sits right after Shop By Category; give it a subtle green-tinted
   surface and a thin grey divider so the two "Shop By..." sections separate cleanly. */
.hp-categories.hp-categories--themes {
  background: var(--hp-green-soft);
  border-top: 1px solid var(--hp-line);
}
.hp-arrivals        { background: var(--hp-surface); }
.hp-resources       { background: var(--hp-surface-2); }
.hp-why             { background: var(--hp-green); }
#manufacturer-banner.hp-brands { background: var(--hp-surface); }

/* Subtle top border between consecutive same-color sections so they don't blur together */
.hp-section + .hp-section:not(.hp-section--dark) {
  position: relative;
}

.hp-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.hp-section-head .hp-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-green);
  padding: 6px 12px;
  background: var(--hp-green-soft);
  border-radius: 999px;
  margin-bottom: 14px;
}
.hp-section-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--hp-ink);
  margin: 0 0 10px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.hp-section-head p {
  color: var(--hp-text-muted);
  font-size: 15px;
  margin: 0;
}
.hp-section-head--left {
  text-align: left;
  margin-left: 0;
}

.hp-section-cta {
  text-align: center;
  margin-top: clamp(28px, 4vw, 44px);
}
.hp-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--hp-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color 0.18s ease, border-color 0.18s ease, gap 0.18s ease;
}
.hp-link-arrow:hover {
  color: var(--hp-green);
  border-bottom-color: var(--hp-green);
  gap: 12px;
}

/* ============================================================
   1) HEADER — utility bar + main bar + nav
   ============================================================ */

/* Reset the sticky header so we can rebuild it cleanly */
.hp-redesign-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--hp-surface);
  border-bottom: 1px solid var(--hp-line);
  box-shadow: 0 1px 0 rgba(17, 20, 24, 0.02);
}

/* Utility bar */
.hp-utility {
  background: var(--hp-ink);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.hp-utility .hp-utility-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
  gap: 24px;
}
.hp-utility a,
.hp-utility button {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
}
.hp-utility a:hover,
.hp-utility button:hover {
  color: #fff;
}
.hp-utility .hp-utility-promo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
}
.hp-utility .hp-utility-promo .hp-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hp-green);
  box-shadow: 0 0 0 0 rgba(67, 161, 55, 0.7);
  animation: hp-pulse 1.8s infinite;
}
@keyframes hp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(67, 161, 55, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(67, 161, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(67, 161, 55, 0); }
}
.hp-utility-list {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hp-utility-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hp-utility-list .sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
}

/* Main bar — green so the white HIRSCH logo reads */
.hp-mainbar {
  padding: 18px 0;
  background: var(--hp-green);
  color: #fff;
}
.hp-mainbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.hp-logo img {
  height: 56px;
  width: auto;
  display: block;
}

/* Search */
.hp-search-form {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.hp-search-form input {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid var(--hp-line);
  padding: 0 56px 0 22px;
  background: var(--hp-surface-2);
  font-size: 14px;
  color: var(--hp-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.hp-search-form input:focus {
  outline: 0;
  border-color: var(--hp-green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(67, 161, 55, 0.12);
}
.hp-search-form .hp-search-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  width: 38px;
  border-radius: 50%;
  background: var(--hp-green);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.hp-search-form .hp-search-btn:hover {
  background: var(--hp-green-dark);
  transform: translateY(-50%) scale(1.04);
}

/* Header action buttons (account, cart) — sit on the green main bar */
.hp-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hp-icon-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 72px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--hp-radius);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  transition: background 0.18s ease, color 0.18s ease;
  cursor: pointer;
}
.hp-icon-btn i {
  font-size: 20px;
  color: #fff;
}
.hp-icon-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.hp-icon-btn:hover i { color: #fff; }
.hp-icon-btn .hp-icon-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #fff;
  color: var(--hp-green);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile bar lives on the green main bar — light text/icons */
.hp-mobile-toggle { color: #fff; }
.hp-mobile-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.hp-mobile-bar .hp-icon-btn { min-width: 44px; padding: 8px; }
.hp-mobile-bar .hp-icon-btn span { display: none; }

/* Nav bar (mega menu trigger row) — frosted glass */
.hp-navbar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid var(--hp-line);
  position: relative; /* anchor for absolutely-positioned mega panels */
}
/* Fallback for browsers without backdrop-filter support — keep it readable */
@supports not (backdrop-filter: blur(1px)) {
  .hp-navbar { background: #ffffff; }
}
.hp-navbar > .container.custom-container { position: relative; }
.hp-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  position: relative;
}
.hp-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hp-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease;
}
.hp-nav-link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 2px;
  background: var(--hp-green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}
.hp-nav-link:hover,
.hp-nav-link[aria-expanded="true"] {
  color: var(--hp-green);
}
.hp-nav-link:hover::after,
.hp-nav-link[aria-expanded="true"]::after {
  transform: scaleX(1);
}
.hp-nav-link .hp-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.hp-nav-link[aria-expanded="true"] .hp-caret {
  transform: translateY(1px) rotate(-135deg);
}
.hp-nav-link.is-accent {
  color: var(--hp-green);
}
.hp-nav-link .hp-pill-24 {
  background: var(--hp-green);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Mega menu panels */
.hp-mega {
  position: absolute;
  /* Slight negative top + transparent top padding gives a hover "bridge"
     so the cursor can move from the trigger button into the panel without
     crossing an empty region that fires mouseleave. */
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  z-index: 1100;
  background: #fff;
  border-top: 1px solid var(--hp-line);
  box-shadow: var(--hp-shadow-xl);
  padding: 36px 32px 32px;
  border-radius: 0 0 var(--hp-radius-lg) var(--hp-radius-lg);
  display: none;
  animation: hp-fadeIn 0.18s ease;
}
.hp-mega.is-open { display: block; }
/* Invisible top bridge so the cursor never "falls into" a gap */
.hp-mega::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
}
@keyframes hp-fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hp-mega-grid {
  display: grid;
  gap: 36px;
}
.hp-mega--product .hp-mega-grid,
.hp-mega--themes .hp-mega-grid {
  grid-template-columns: 1fr 320px;
}
.hp-mega-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 28px;
}
.hp-mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--hp-radius-sm);
  color: var(--hp-ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.16s ease, color 0.16s ease, padding 0.16s ease;
}
.hp-mega-link:hover {
  background: var(--hp-green-soft);
  color: var(--hp-green);
  padding-left: 16px;
}
.hp-mega-link .hp-mega-arrow {
  margin-left: auto;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  color: var(--hp-green);
}
.hp-mega-link:hover .hp-mega-arrow {
  opacity: 1;
  transform: translateX(0);
}
.hp-mega-preview {
  border-radius: var(--hp-radius-lg);
  background: var(--hp-surface-2);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  min-height: 360px;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.hp-mega-preview .hp-mega-preview-img {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--hp-radius);
  background: #fff;
}
.hp-mega-preview img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  transition: opacity 0.18s ease;
}
.hp-mega-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hp-mega-preview-meta .hp-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-green);
}
.hp-mega-preview-meta strong {
  font-size: 16px;
  color: var(--hp-ink);
}

/* Brand mega menu */
.hp-mega--brand {
  padding: 28px 32px 24px;
}
.hp-brand-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  margin: 0 0 22px;
  background: var(--hp-surface-2);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}
.hp-brand-filter > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hp-ink-2);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.hp-brand-filter > span:hover { color: var(--hp-green); }
.hp-brand-filter > span.active {
  background: var(--hp-green);
  color: #fff;
  box-shadow: var(--hp-shadow-sm);
}
.hp-brand-grid-wrap {
  position: relative;
}
.hp-brand-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 4px 4px 16px;
  scroll-behavior: smooth;
}
.hp-brand-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translate(-50%, 6px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(17, 20, 24, 0.85);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  z-index: 2;
}
.hp-brand-scroll-hint i {
  animation: hp-bob 1.4s ease-in-out infinite;
}
.hp-brand-scroll-hint.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes hp-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.hp-brand-grid .brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 8px 6px;
  min-height: 60px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.hp-brand-grid .brand-item img {
  max-width: 100%;
  max-height: 36px;
  object-fit: contain;
  filter: grayscale(100%) contrast(70%);
  opacity: 0.78;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.hp-brand-grid .brand-item:hover {
  border-color: var(--hp-green);
  box-shadow: var(--hp-shadow);
  transform: translateY(-2px);
}
.hp-brand-grid .brand-item:hover img {
  filter: none;
  opacity: 1;
}

/* Sales tools mega menu */
.hp-mega--sales {
  padding: 24px;
}
.hp-mega-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 560px;
}
.hp-mega-tool {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--hp-radius);
  background: var(--hp-surface-2);
  text-decoration: none;
  color: var(--hp-ink);
  border: 1px solid transparent;
  transition: all 0.18s ease;
}
.hp-mega-tool:hover {
  background: #fff;
  border-color: var(--hp-green);
  box-shadow: var(--hp-shadow);
  transform: translateY(-2px);
  color: var(--hp-ink);
}
.hp-mega-tool .hp-mega-tool-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--hp-green-soft);
  color: var(--hp-green);
  font-size: 18px;
}
.hp-mega-tool strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--hp-ink);
}
.hp-mega-tool span {
  display: block;
  font-size: 12px;
  color: var(--hp-text-muted);
  margin-top: 1px;
}

/* Hide the legacy header so it doesn't conflict with the new one */
.hp-redesign-active .top-header,
.hp-redesign-active > header,
.hp-redesign-active > main > #sub-menus + header,
body.hp-home > header.hp-legacy-header,
body.hp-home > .top-header,
body.hp-home > header:not(.hp-redesign-header) {
  /* placeholder — not used; legacy header markup is replaced inline */
}

/* ============================================================
   2) HERO — fix the resize bug, keep as a clean image carousel
   ============================================================ */
.hp-hero {
  position: relative;
  background: var(--hp-surface-2);
  overflow: hidden;
}
#common-home .hp-hero .carousel { margin: 0 !important; }
/* Lock the carousel viewport to one consistent aspect ratio across slides
   so the indicators always sit inside the image. Images that don't match
   this ratio crop slightly on the sides via object-fit:cover. */
#common-home .hp-hero .carousel-inner {
  overflow: hidden;
  aspect-ratio: 16 / 7;
  max-height: 620px;
}
@media (max-width: 767px) {
  #common-home .hp-hero .carousel-inner { aspect-ratio: 16 / 9; }
}
#common-home .hp-hero .carousel-item {
  height: 100%;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
#common-home .hp-hero .carousel-item > .row,
#common-home .hp-hero .carousel-item > .row > .col,
#common-home .hp-hero .carousel-item > .row > [class*="col-"] {
  height: 100%;
}
#common-home .hp-hero .carousel-item img.hp-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--hp-surface-2);
  margin: 0;
}

#common-home .hp-hero .carousel-control-prev,
#common-home .hp-hero .carousel-control-next {
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 50% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0.95;
  box-shadow: var(--hp-shadow);
  transition: transform 0.2s ease, background 0.2s ease;
  margin: 0 18px;
  left: auto;
  right: auto;
}
#common-home .hp-hero .carousel-control-prev { left: 18px !important; }
#common-home .hp-hero .carousel-control-next { right: 18px !important; }
#common-home .hp-hero .carousel-control-prev:hover,
#common-home .hp-hero .carousel-control-next:hover {
  background: #fff !important;
  transform: translateY(-50%) scale(1.08) !important;
  opacity: 1;
}
#common-home .hp-hero .carousel-control-prev-icon,
#common-home .hp-hero .carousel-control-next-icon {
  background: none !important;
  width: 14px !important;
  height: 14px !important;
  border: solid var(--hp-ink) !important;
  border-width: 0 2.5px 2.5px 0 !important;
  padding: 0 !important;
}
#common-home .hp-hero .carousel-control-prev-icon { transform: rotate(135deg) !important; margin-left: 4px; }
#common-home .hp-hero .carousel-control-next-icon { transform: rotate(-45deg) !important; margin-right: 4px; }
#common-home .hp-hero .carousel-indicators {
  bottom: 16px !important;
  margin-bottom: 0;
  gap: 8px;
}
#common-home .hp-hero .carousel-indicators button {
  width: 36px !important;
  height: 4px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
  margin: 0 4px;
  transition: width 0.25s ease, background 0.2s ease;
}
#common-home .hp-hero .carousel-indicators button.active {
  width: 56px !important;
  background: var(--hp-green) !important;
}

/* ============================================================
   3) FEATURED BRANDS (5 brands)
   ============================================================ */
.hp-featured-brands {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.hp-featured-brands-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 991px) {
  .hp-featured-brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-featured-brands-grid > .hp-featured-brand:nth-child(4),
  .hp-featured-brands-grid > .hp-featured-brand:nth-child(5) {
    grid-column: span 1;
  }
}
@media (max-width: 575px) {
  .hp-featured-brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hp-featured-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  background: var(--hp-surface);
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-lg);
  padding: 22px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hp-featured-brand:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--hp-shadow-lg);
}
.hp-featured-brand img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.22s ease, transform 0.22s ease;
}
.hp-featured-brand:hover img {
  filter: none;
  transform: scale(1.04);
}

/* ============================================================
   4) LATEST ARRIVALS — 4 cols × 2 rows, modernized cards
   ============================================================ */
.hp-arrivals .product-thumb-grid {
  width: 100% !important;
  padding: 0 8px;
}
.hp-arrivals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 991px) {
  .hp-arrivals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hp-arrivals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 419px) {
  .hp-arrivals-grid { grid-template-columns: 1fr; }
}

/* Override the legacy product-thumb so the modern grid card wins */
.hp-arrivals .product-thumb {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-lg);
  overflow: hidden;
  margin: 0;
  height: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hp-arrivals .product-thumb:hover {
  transform: translateY(-4px);
  box-shadow: var(--hp-shadow-lg);
  border-color: transparent;
}
.hp-arrivals .product-thumb .image {
  position: relative;
  background: #fff;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}
.hp-arrivals .product-thumb .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  transition: transform 0.4s ease;
}
.hp-arrivals .product-thumb:hover .image img {
  transform: scale(1.04);
}
.hp-arrivals .product-thumb .hp-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--hp-green);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Color swatches: continuation of the white image area, sitting right below
   the image. The legacy .product-colors rule uses `padding: 0 !important`, so
   we match it. */
.hp-arrivals .product-thumb .product-colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  padding: 10px 14px 14px !important;
  margin: 0;
  list-style: none;
  background: #fff;
}
.hp-arrivals .product-thumb .product-colors .color-border {
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 2px;
  border: 1.5px solid #d0d3d8;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hp-arrivals .product-thumb .product-colors .color-border img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
}

.hp-arrivals .product-thumb .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--hp-surface-2);
  padding: 14px 16px 18px;
  border-top: 1px solid var(--hp-line);
}
.hp-arrivals .product-thumb .description {
  height: auto;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hp-arrivals .product-thumb .description h4 {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--hp-text-muted) !important;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.hp-arrivals .product-thumb .description h4 a {
  color: var(--hp-text-muted) !important;
  font-size: 11px !important;
}
.hp-arrivals .product-thumb .description .hp-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--hp-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
  margin: 0;
}
.hp-arrivals .product-thumb .description .hp-name a {
  color: var(--hp-ink) !important;
  font-size: 15px !important;
  text-decoration: none;
  font-weight: 600 !important;
}
.hp-arrivals .product-thumb .description .hp-name a:hover {
  color: var(--hp-green) !important;
}
.hp-arrivals .product-thumb .price {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--hp-ink);
}
.hp-arrivals .product-thumb .price .hp-price-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hp-text-muted);
  text-transform: uppercase;
}
.hp-arrivals .product-thumb .price .price-new,
.hp-arrivals .product-thumb .price .price-old {
  font-size: 16px;
  font-weight: 700;
  color: var(--hp-ink);
}
.hp-arrivals .product-thumb .price .price-old {
  color: var(--hp-green);
  margin-left: 4px;
}

/* Bottom action bar (NEW / NXT / Compare) is hidden on the home arrivals cards
   — the product page handles those actions. Keeps the card focused on price + name. */
.hp-arrivals .product-thumb .hp-card-foot { display: none; }

/* ============================================================
   5) SHOP BY CATEGORY — clean grid, no vertical text
   ============================================================ */
.hp-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 991px) {
  .hp-categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .hp-categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.hp-category-card {
  position: relative;
  display: block;
  border-radius: var(--hp-radius-lg);
  overflow: hidden;
  background: var(--hp-surface-3);
  aspect-ratio: 4 / 5;
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hp-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hp-shadow-lg);
}
.hp-category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.hp-category-card:hover img { transform: scale(1.06); }
.hp-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 20, 24, 0.78) 0%,
    rgba(17, 20, 24, 0.35) 40%,
    rgba(17, 20, 24, 0) 75%
  );
  z-index: 1;
}
.hp-category-card .hp-category-label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hp-category-card .hp-category-label-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.hp-category-card .hp-category-cta {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--hp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hp-category-card:hover .hp-category-cta {
  background: var(--hp-green);
  color: #fff;
  transform: translateX(2px);
}

/* ============================================================
   6) RESOURCES — 5 cards, click-to-reveal panel
   ============================================================ */
.hp-resources-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1199px) { .hp-resources-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .hp-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 419px)  { .hp-resources-grid { grid-template-columns: 1fr; } }

.hp-resource-card {
  position: relative;
  border-radius: var(--hp-radius-lg);
  overflow: hidden;
  cursor: pointer;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  background: var(--hp-ink);
  color: #fff;
  isolation: isolate;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.hp-resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hp-shadow-lg);
}
.hp-resource-card .hp-resource-front,
.hp-resource-card .hp-resource-back {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hp-resource-card .hp-resource-back {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  background: rgba(17, 20, 24, 0.96);
}
.hp-resource-card.is-open .hp-resource-front {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.hp-resource-card.is-open .hp-resource-back {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hp-resource-front .hp-resource-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
}
/* Bump specificity above the #common-home h3 base rule so card titles stay white */
#common-home .hp-resource-front h3,
#common-home .hp-resource-back h3 {
  color: #fff;
}
.hp-resource-front h3 {
  font-size: 22px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hp-resource-front .hp-resource-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hp-resource-back h3 {
  font-size: 18px;
  color: #fff;
  margin: 0 0 10px;
}
.hp-resource-back p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.5;
}
.hp-resource-back .hp-resource-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  color: var(--hp-ink);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  align-self: flex-start;
  transition: background 0.18s ease, transform 0.18s ease;
}
.hp-resource-back .hp-resource-link:hover {
  background: var(--hp-green);
  color: #fff;
  transform: translateX(2px);
}
.hp-resource-back .hp-resource-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease;
}
.hp-resource-back .hp-resource-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   7) WHY HIRSCH (new value-prop section)
   ============================================================ */
/* Bold green splash — white headline, translucent panels with subtle white borders */
.hp-why {
  background: var(--hp-green);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Decorative soft accent so the green isn't flat */
.hp-why::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 10% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(700px 380px at 90% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.hp-why > * { position: relative; z-index: 1; }

.hp-why .hp-section-head h2,
#common-home .hp-why .hp-section-head h2 { color: #fff; }
.hp-why .hp-section-head p { color: rgba(255, 255, 255, 0.85); }
.hp-why .hp-section-head .hp-eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.hp-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 991px) { .hp-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .hp-why-grid { grid-template-columns: 1fr; } }

.hp-why-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--hp-radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.hp-why-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}
.hp-why-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
/* Higher specificity to beat the global #common-home h3 color */
#common-home .hp-why-card h3 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.hp-why-card p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
}

/* ============================================================
   8) 70+ PREMIUM BRANDS CAROUSEL — bigger logos, cleaner
   ============================================================ */
#manufacturer-banner.hp-brands {
  background: var(--hp-surface);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.hp-brands .hp-section-head { margin-bottom: 22px; }

/* 3-stripe layout: each stripe is its own Splide instance, synced together */
.hp-brands-stripes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Prev / next buttons flanking the title */
.hp-brands-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 10px;
}
.hp-brands-title-row h2 { margin: 0; }
.hp-brands-arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hp-line);
  color: var(--hp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.hp-brands-arrow:hover {
  background: var(--hp-green);
  border-color: var(--hp-green);
  color: #fff;
  transform: scale(1.06);
  box-shadow: var(--hp-shadow);
}
.hp-brands-arrow:active { transform: scale(0.98); }

/* Splide's track clips children by default. Make horizontal clipping work
   while letting hover lift / scale spill upward without being chopped. */
.hp-brands .splide,
.hp-brands .splide__track {
  overflow-x: clip;
  overflow-y: visible;
}
/* Give each stripe a little vertical breathing room so the lifted card doesn't
   touch the next stripe above */
.hp-brands .splide__list { padding: 4px 0; }

.hp-brands .splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-brands .hp-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
  background: var(--hp-surface);
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  padding: 18px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  /* When dragging, prevent text selection */
  user-select: none;
  -webkit-user-drag: none;
}
.hp-brands .splide.is-dragging .hp-brand-logo,
.hp-brands .splide.is-dragging .hp-brand-logo img {
  pointer-events: none;
}
.hp-brands .hp-brand-logo img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(100%) contrast(60%);
  opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  /* override the legacy darkening rules */
  mix-blend-mode: normal !important;
}
.hp-brands .splide__slide img {
  /* override legacy stylesheet filter that lives on .splide__slide img */
  filter: grayscale(100%) contrast(60%) !important;
  mix-blend-mode: normal !important;
  opacity: 0.78;
}
.hp-brands .hp-brand-logo:hover {
  border-color: var(--hp-green);
  box-shadow: var(--hp-shadow);
  transform: translateY(-2px);
}
.hp-brands .hp-brand-logo:hover img,
.hp-brands .splide__slide:hover img {
  filter: none !important;
  opacity: 1;
  transform: scale(1.04);
}

/* ============================================================
   9) FOOTER — modern layout with logo + SEO blurb + columns
   ============================================================ */
footer.hp-footer {
  background: var(--hp-ink) !important;
  color: rgba(255, 255, 255, 0.7);
  padding: 0 !important;
  border-top: 0;
}
footer.hp-footer h4 { color: #fff !important; }
footer.hp-footer a { color: rgba(255, 255, 255, 0.68); }
.hp-footer-top {
  padding: clamp(48px, 5vw, 72px) 0 clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hp-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 48px;
}
@media (max-width: 991px) {
  .hp-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .hp-footer-grid > .hp-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 519px) {
  /* Keep a 2x2 grid on mobile (Shop | Resources / About | Support) rather than
     stacking all four columns vertically. */
  .hp-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

.hp-footer-brand img {
  height: 56px;
  width: auto;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}
.hp-footer-brand p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 22px;
  max-width: 440px;
}
.hp-footer-brand .hp-footer-socials {
  display: flex;
  gap: 10px;
}
.hp-footer-brand .hp-footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  padding: 0;
}
.hp-footer-brand .hp-footer-socials a:hover {
  background: var(--hp-green);
  transform: translateY(-2px);
  color: #fff;
}
.hp-footer-brand .hp-footer-socials i {
  font-size: 15px;
  line-height: 1;
  display: block;
}

.hp-footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.hp-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hp-footer-col li { margin-bottom: 10px; }
.hp-footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.18s ease, padding-left 0.18s ease;
  display: inline-block;
}
.hp-footer-col a:hover {
  color: #fff;
  padding-left: 4px;
}

.hp-footer-bottom {
  padding: 18px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.hp-footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: space-between;
  align-items: center;
}
.hp-footer-bottom a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.hp-footer-bottom a:hover { color: #fff; }
.hp-footer-bottom .hp-credentials {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hp-footer-bottom .hp-credentials span {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
}

/* ============================================================
   Responsive header tweaks
   ============================================================ */
@media (max-width: 991px) {
  .hp-mainbar-inner { gap: 14px; grid-template-columns: auto 1fr auto; }
  .hp-mega { padding: 24px 18px 22px; border-radius: 0; }
  .hp-mega-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .hp-mega--product .hp-mega-grid,
  .hp-mega--themes .hp-mega-grid { grid-template-columns: 1fr; }
  .hp-mega-preview { display: none; }
  .hp-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-mega-tools { grid-template-columns: 1fr; min-width: auto; }
}

/* Mobile menu drawer */
.hp-mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
@media (max-width: 991px) {
  .hp-mobile-bar { display: flex; }
  .hp-mainbar { padding: 0; }
  .hp-mainbar > .container { padding: 0 14px; }
  .hp-mainbar-inner > .hp-logo,
  .hp-mainbar-inner > .hp-search-form,
  .hp-mainbar-inner > .hp-header-actions { display: none; }
  .hp-navbar { display: none; }
}
.hp-mobile-toggle {
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  border-radius: 8px;
}
.hp-mobile-toggle:hover { background: var(--hp-surface-3); }
.hp-mobile-bar .hp-logo img { height: 44px; }

.hp-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(17, 20, 24, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.hp-mobile-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.hp-mobile-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 380px);
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hp-mobile-drawer.is-open .hp-mobile-drawer-panel { transform: translateX(0); }
.hp-mobile-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hp-line);
  background: var(--hp-green);
}
.hp-mobile-drawer-head img { height: 40px; }
.hp-mobile-drawer-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 8px;
}
.hp-mobile-drawer-search { padding: 14px 16px; border-bottom: 1px solid var(--hp-line); }
.hp-mobile-drawer-search .hp-search-form input { height: 44px; }
.hp-mobile-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.hp-mobile-section { padding: 6px 16px; }
.hp-mobile-section + .hp-mobile-section { border-top: 1px solid var(--hp-line); }
.hp-mobile-accordion-btn {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--hp-ink);
  padding: 14px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hp-mobile-accordion-btn[aria-expanded="true"] { color: var(--hp-green); }
button.hp-mobile-accordion-btn::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
button.hp-mobile-accordion-btn[aria-expanded="true"]::after { transform: rotate(-135deg); }
.hp-mobile-accordion-panel {
  display: none;
  padding: 4px 0 14px 4px;
}
.hp-mobile-accordion-panel.is-open { display: block; }
.hp-mobile-accordion-panel a {
  display: block;
  padding: 10px 12px;
  color: var(--hp-text);
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
}
.hp-mobile-accordion-panel a:hover {
  background: var(--hp-green-soft);
  color: var(--hp-green);
}
.hp-mobile-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px 16px 18px;
  border-top: 1px solid var(--hp-line);
}
.hp-mobile-quick a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hp-ink);
  text-decoration: none;
  background: var(--hp-surface-2);
}
.hp-mobile-quick a i { font-size: 18px; color: var(--hp-green); }

/* Push small-screen hero out of the redesigned header's box-shadow */
.hp-hero + * { margin-top: 0; }

/* Neutralize the legacy header CSS so the redesign always wins.
   The bg here is just a fallback — each band (utility/main/nav) sets its own. */
body header.hp-redesign-header {
  background: transparent !important;
  position: sticky;
  top: 0;
  border-bottom: 0;
  z-index: 1020;
}
.hp-redesign-header #logo { margin: 0; }
.hp-redesign-header #logo img { max-width: none; }

/* Re-style the legacy cart button (.top-header-btn) so it matches the new
   icon buttons. It's rendered inside cart.twig which we don't want to touch. */
.hp-redesign-header .top-header-btn,
.hp-redesign-header #cart-button {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 72px;
  height: auto !important;
  padding: 6px 10px !important;
  border-radius: var(--hp-radius);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.18s ease, color 0.18s ease;
}
.hp-redesign-header .top-header-btn:hover,
.hp-redesign-header #cart-button:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}
.hp-redesign-header .top-header-btn i,
.hp-redesign-header #cart-button i {
  font-size: 20px;
  color: #fff;
  margin: 0 !important;
}
.hp-redesign-header .top-header-btn:hover i,
.hp-redesign-header #cart-button:hover i { color: #fff; }
.hp-redesign-header .hp-icon-btn-label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }

/* Cart badge — white pill with green text against the green bar */
.hp-redesign-header #cart-badge {
  background: #fff !important;
  color: var(--hp-green) !important;
  font-weight: 700;
  font-size: 10px;
  top: 4px !important;
  right: 4px !important;
  left: auto !important;
  transform: none !important;
}
/* Mobile bar: hide the "Cart" label, keep just the icon */
.hp-mobile-bar #cart-button .hp-icon-btn-label { display: none; }
.hp-mobile-bar #cart-button { min-width: 44px !important; padding: 8px !important; }

/* Currency selector — make flags fit the dark utility bar */
.hp-utility .currency-menu-item {
  border-color: transparent !important;
  background: transparent;
  padding: 0;
}
.hp-utility .currency-menu-item img {
  height: 14px !important;
  border-radius: 2px;
}
.hp-utility .currency-menu-item.active {
  border-color: rgba(255,255,255,0.5) !important;
}
.hp-utility #form-currency { margin: 0; padding: 0; }
.hp-utility #currency-menu { gap: 6px !important; }
.hp-utility .currency-menu-item style { display: none; }

/* Hide the inline <style> block emitted by currency.twig from affecting layout */
.hp-utility-list li > form { margin: 0; }

/* The cart tippy popover sits inside the new header — keep it on top */
.tippy-box { z-index: 1500 !important; }

/* When the legacy stylesheet contains generic `header` rules, lock them out */
body > header,
body header {
  /* no-op base; the .hp-redesign-header rule above wins via specificity */
}

/* Hide the legacy in-DOM bits that we've replaced — kept in the twig
   only for backward compatibility on sub-routes that read them via JS */
.hp-legacy-hidden { display: none !important; }