/* ==========================================================================
   Pawcessories — Emergency Header Override
   --------------------------------------------------------------------------
   Hand-written, dependency-free CSS that forces the header/nav/category-ribbon
   layout regardless of whether the Tailwind CDN compiler has run yet. Paste
   this whole block into Appearance → Customize → Additional CSS, or into a
   child theme's style.css. It targets stable classes (pawc-*) added directly
   in header.php / category_pills.php — not Tailwind's utility classes — so it
   keeps working even while the CDN pipeline is flaky or hasn't loaded yet.
   Safe to delete once assets/css/main.css is compiled and the layout looks
   right without it.
   ========================================================================== */

/* ---- 1. Header row & navigation spacing --------------------------------- */

.pawc-header-row {
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.pawc-header-row-inner {
  position: relative !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.pawc-nav-primary,
.pawc-nav-secondary {
  display: flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #1f2937 !important;
}

.pawc-nav-primary { gap: 32px !important; }
.pawc-nav-secondary { gap: 24px !important; }

/* Logo: pinned dead-center regardless of how long each nav side is. */
.pawc-logo-wrap {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

.pawc-logo-wrap img {
  height: 64px !important;
  width: auto !important;
  display: block !important;
}

.pawc-header-icons {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-left: auto !important;
}

/* ---- 2. Prevent link wrapping (ÜBER UNS / PRINT-ON-DEMAND, etc.) -------- */

.pawc-nav-primary a,
.pawc-nav-secondary a,
.pawc-header-icons a {
  white-space: nowrap !important;
  display: inline-block !important;
}

/* ---- 3. Top bar: keep it aligned with the header container below it ---- */

.pawc-topbar-inner {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

/* ---- 4. Category ribbon -------------------------------------------------- */

.pawc-category-section {
  background-color: #fdfbf7 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.pawc-category-nav {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  column-gap: 40px !important;
  row-gap: 24px !important;
}

.pawc-pill {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  width: 80px !important;
  text-decoration: none !important;
}

.pawc-pill-circle {
  width: 80px !important;
  height: 80px !important;
  border-radius: 9999px !important;
  border-style: solid !important;
  border-width: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.pawc-pill:hover .pawc-pill-circle {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.03) !important;
}

.pawc-pill-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #1e293b !important;
  white-space: nowrap !important;
}

/* ---- 5. Mobile: let the two nav rows collapse away, logo stays centered - */

@media (max-width: 1023px) {
  .pawc-nav-primary,
  .pawc-nav-secondary {
    display: none !important;
  }
}