/**
 * Punzday — Components
 */

/* ============ BUTTONS ============ */
.pz-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pz-space-2);
  padding: var(--pz-space-3) var(--pz-space-5);
  border-radius: var(--pz-radius-pill);
  font-weight: var(--pz-fw-semibold);
  font-size: var(--pz-fs-sm);
  border: 1px solid transparent;
  transition: transform var(--pz-duration-fast) var(--pz-ease), background-color var(--pz-duration-base) var(--pz-ease-out), border-color var(--pz-duration-base) var(--pz-ease-out), color var(--pz-duration-base) var(--pz-ease-out);
  min-height: 44px;
}
.pz-btn:hover{ transform: translateY(-2px) scale(1.02); }
.pz-btn:active{ transform: translateY(0) scale(0.98); }

.pz-btn--primary{ background: var(--pz-navy); color: #fff; }
.pz-btn--primary:hover{ background: var(--pz-navy-700); }

.pz-btn--yellow{ background: var(--pz-yellow); color: var(--pz-navy); box-shadow: var(--pz-shadow-yellow); }
.pz-btn--yellow:hover{ background: var(--pz-yellow-600); }

.pz-btn--accent{ background: var(--pz-accent); color: #fff; }
.pz-btn--accent:hover{ background: var(--pz-accent-600); }

.pz-btn--outline{ background: transparent; border-color: var(--pz-border-strong); color: var(--pz-text); }
.pz-btn--outline:hover{ border-color: var(--pz-navy); color: var(--pz-navy); }

.pz-btn--ghost{ background: transparent; color: var(--pz-text-muted); min-height: auto; padding: var(--pz-space-2) var(--pz-space-3); }
.pz-btn--ghost:hover{ color: var(--pz-navy); }

.pz-btn--icon{ padding: var(--pz-space-2); border-radius: 50%; min-height: 44px; min-width: 44px; }
.pz-btn--sm{ padding: var(--pz-space-2) var(--pz-space-4); min-height: 36px; font-size: var(--pz-fs-xs); }

/* ============ HEADER (shrinks on scroll) ============ */
.pz-header{
  position: sticky; top: 0; z-index: var(--pz-z-header);
  background: color-mix(in srgb, var(--pz-bg) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--pz-border);
  height: var(--pz-header-height);
  transition: height var(--pz-duration-base) var(--pz-ease-out), box-shadow var(--pz-duration-base) var(--pz-ease-out);
}
.pz-header.is-shrunk{ height: var(--pz-header-height-shrunk); box-shadow: var(--pz-shadow-sm); }
.pz-header__inner{ height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--pz-space-4); min-width: 0; }

.pz-logo{ display: flex; align-items: center; gap: var(--pz-space-2); font-family: var(--pz-font-display); font-size: var(--pz-fs-md); font-weight: var(--pz-fw-black); color: var(--pz-navy); min-width: 0; flex-shrink: 1; overflow: hidden; }
.pz-logo span{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pz-logo__mark{ width: 30px; height: 30px; color: var(--pz-yellow); flex-shrink: 0; transition: transform var(--pz-duration-base) var(--pz-ease); }
.pz-logo:hover .pz-logo__mark{ transform: rotate(-12deg); }
/* Constrain an admin-uploaded custom logo image to a sane header height
   regardless of the original file's dimensions — add_theme_support's
   flex-width/flex-height means WP does NOT do this for us. Without this,
   a large uploaded logo file can blow out the entire header layout. */
.pz-logo img{ height: 32px; width: auto; max-width: 160px; max-height: 40px; object-fit: contain; flex-shrink: 0; }

.pz-nav{ display: flex; align-items: center; gap: var(--pz-space-6); }
.pz-nav ul{ display: flex; align-items: center; gap: var(--pz-space-5); }
.pz-nav a{ font-size: var(--pz-fs-sm); font-weight: var(--pz-fw-medium); color: var(--pz-text-muted); padding: var(--pz-space-2) 0; }
.pz-nav a:hover, .pz-nav a[aria-current="page"]{ color: var(--pz-navy); }

.pz-header__actions{ display: flex; align-items: center; gap: var(--pz-space-2); flex-shrink: 0; }

.pz-theme-toggle{ width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pz-text-muted); }
.pz-theme-toggle:hover{ background: var(--pz-gray); color: var(--pz-navy); }
.pz-theme-toggle .pz-icon-moon{ display: none; }
:root[data-theme="dark"] .pz-theme-toggle .pz-icon-sun{ display: none; }
:root[data-theme="dark"] .pz-theme-toggle .pz-icon-moon{ display: block; }

.pz-menu-toggle{ display: none; width: 44px; height: 44px; }

.pz-trending-btn{ background: var(--pz-navy); color: #fff; }
.pz-trending-btn svg{ color: var(--pz-yellow); }

@media (max-width: 900px){
  .pz-nav{ position: fixed; inset: var(--pz-header-height-shrunk) 0 0 0; background: var(--pz-bg); transform: translateX(100%); transition: transform var(--pz-duration-slow) var(--pz-ease-out); overflow-y: auto; padding: var(--pz-space-6) var(--pz-space-5) var(--pz-space-9); flex-direction: column; align-items: stretch; z-index: var(--pz-z-overlay); }
  .pz-nav.is-open{ transform: translateX(0); }
  .pz-nav ul{ flex-direction: column; align-items: stretch; gap: 0; }
  .pz-nav li{ border-bottom: 1px solid var(--pz-border); }
  .pz-nav a{ display: block; padding: var(--pz-space-4) 0; font-size: var(--pz-fs-md); }
  .pz-menu-toggle{ display: flex; align-items: center; justify-content: center; }
  .pz-header__actions .pz-trending-btn{ display: none; }
}

@media (max-width: 380px){
  .pz-header__inner{ gap: var(--pz-space-2); }
  .pz-header__actions{ gap: 2px; }
  .pz-logo{ font-size: var(--pz-fs-sm); gap: 6px; }
  .pz-logo__mark{ width: 24px; height: 24px; }
  .pz-btn--icon{ width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  .pz-theme-toggle{ width: 40px; height: 40px; }
}

/* ============ SEARCH (header + overlay + live AJAX) ============ */
.pz-search-overlay{ position: fixed; inset: 0; z-index: var(--pz-z-modal); background: var(--pz-overlay); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; opacity: 0; visibility: hidden; transition: opacity var(--pz-duration-base) var(--pz-ease-out), visibility var(--pz-duration-base); }
.pz-search-overlay.is-open{ opacity: 1; visibility: visible; }
.pz-search-panel{ width: min(640px, 92vw); max-height: 76vh; overflow-y: auto; background: var(--pz-surface); border-radius: var(--pz-radius-lg); box-shadow: var(--pz-shadow-lg); padding: var(--pz-space-5); transform: translateY(-12px); transition: transform var(--pz-duration-base) var(--pz-ease-out); }
.pz-search-overlay.is-open .pz-search-panel{ transform: translateY(0); }
.pz-search-panel__input-row{ display: flex; align-items: center; gap: var(--pz-space-3); border-bottom: 1px solid var(--pz-border); padding-bottom: var(--pz-space-4); }
.pz-search-panel__input-row input{ flex: 1; border: none; background: transparent; font-size: var(--pz-fs-md); font-family: var(--pz-font-display); color: var(--pz-text); }
.pz-search-suggestions{ margin-top: var(--pz-space-4); }
.pz-search-suggestions h5{ font-size: var(--pz-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--pz-text-faint); margin: 0 0 var(--pz-space-3); }
.pz-chip-row{ display: flex; flex-wrap: wrap; gap: var(--pz-space-2); margin-bottom: var(--pz-space-5); }
.pz-chip{ padding: var(--pz-space-2) var(--pz-space-3); background: var(--pz-bg-sunken); border-radius: var(--pz-radius-pill); font-size: var(--pz-fs-xs); color: var(--pz-text-muted); }
.pz-chip:hover{ background: var(--pz-yellow-100); color: var(--pz-navy); }

.pz-live-results{ margin-top: var(--pz-space-3); }
.pz-live-result{ display: block; padding: var(--pz-space-3); border-radius: var(--pz-radius-md); }
.pz-live-result:hover{ background: var(--pz-bg-sunken); }
.pz-live-result__title{ font-weight: var(--pz-fw-semibold); font-size: var(--pz-fs-sm); }
.pz-live-result__excerpt{ font-size: var(--pz-fs-xs); color: var(--pz-text-faint); }
.pz-search-loading{ font-size: var(--pz-fs-xs); color: var(--pz-text-faint); padding: var(--pz-space-3) 0; }

.pz-inline-search{ position: relative; }
.pz-inline-search input{ width: 100%; padding: var(--pz-space-4) var(--pz-space-9) var(--pz-space-4) var(--pz-space-5); border-radius: var(--pz-radius-pill); border: 1px solid var(--pz-border-strong); background: var(--pz-surface); font-size: var(--pz-fs-base); min-height: 56px; }
.pz-inline-search button{ position: absolute; right: 6px; top: 6px; bottom: 6px; width: 44px; border-radius: 50%; background: var(--pz-navy); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ============ HERO ============ */
.pz-hero{ position: relative; padding-block: var(--pz-space-10) var(--pz-space-9); overflow: hidden; text-align: center; }
.pz-hero__shape{ position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.55; animation: pz-float 9s ease-in-out infinite; z-index: 0; }
.pz-hero__shape--1{ width: 140px; height: 140px; background: var(--pz-yellow); top: 8%; left: 6%; animation-delay: 0s; }
.pz-hero__shape--2{ width: 90px; height: 90px; background: var(--pz-navy-100); top: 62%; left: 12%; animation-delay: 1.5s; }
.pz-hero__shape--3{ width: 110px; height: 110px; background: var(--pz-yellow-100); top: 15%; right: 8%; animation-delay: 0.8s; }
.pz-hero__shape--4{ width: 70px; height: 70px; background: var(--pz-success-bg); top: 68%; right: 14%; animation-delay: 2.2s; }
@keyframes pz-float{ 0%, 100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-18px) rotate(8deg); } }

.pz-hero__inner{ position: relative; z-index: 1; max-width: 780px; margin-inline: auto; }
.pz-hero h1{ font-size: clamp(2.25rem, 4vw + 1rem, var(--pz-fs-3xl)); }
.pz-hero h1 .pz-hero__highlight{ color: var(--pz-navy); background: linear-gradient(transparent 60%, var(--pz-yellow) 60%); padding: 0 0.1em; }
.pz-hero .pz-lede{ max-width: 560px; margin-inline: auto; margin-bottom: var(--pz-space-6); }
.pz-hero-search{ max-width: 560px; margin-inline: auto; margin-bottom: var(--pz-space-6); }

.pz-category-pills{ display: flex; justify-content: center; gap: var(--pz-space-2); flex-wrap: wrap; margin-bottom: var(--pz-space-7); }
.pz-category-pill{ display: inline-flex; align-items: center; gap: var(--pz-space-2); padding: var(--pz-space-2) var(--pz-space-4); border-radius: var(--pz-radius-pill); background: var(--pz-surface); border: 1px solid var(--pz-border); font-size: var(--pz-fs-xs); font-weight: var(--pz-fw-semibold); }
.pz-category-pill:hover{ border-color: var(--pz-yellow); transform: translateY(-2px); }

.pz-hero-cta{ display: flex; gap: var(--pz-space-3); justify-content: center; flex-wrap: wrap; }

/* ============ GROAN-O-METER (signature element) ============ */
.pz-groan-meter{ display: inline-flex; align-items: center; gap: 3px; }
.pz-groan-meter__label{ font-size: var(--pz-fs-2xs); color: var(--pz-text-faint); margin-right: var(--pz-space-2); text-transform: uppercase; letter-spacing: 0.04em; }
.pz-groan-meter svg{ width: 15px; height: 15px; color: var(--pz-border-strong); }
.pz-groan-meter svg.is-filled{ color: var(--pz-yellow); }
.pz-pun-card:hover .pz-groan-meter svg.is-filled{ animation: pz-wobble 0.5s var(--pz-ease); }
@keyframes pz-wobble{ 0%, 100%{ transform: rotate(0); } 30%{ transform: rotate(-12deg); } 60%{ transform: rotate(10deg); } }

/* ============ CARDS ============ */
.pz-card{ background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); overflow: hidden; transition: transform var(--pz-duration-base) var(--pz-ease-out), box-shadow var(--pz-duration-base) var(--pz-ease-out), border-color var(--pz-duration-base) var(--pz-ease-out); position: relative; }
.pz-card:hover{ transform: translateY(-4px); box-shadow: var(--pz-shadow-md); border-color: var(--pz-border-strong); }
.pz-card__media{ aspect-ratio: 16/10; overflow: hidden; background: var(--pz-bg-sunken); }
.pz-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--pz-duration-slow) var(--pz-ease-out); }
.pz-card:hover .pz-card__media img{ transform: scale(1.05) rotate(-1deg); }
.pz-card__body{ padding: var(--pz-space-5); }
.pz-card__meta{ display: flex; align-items: center; gap: var(--pz-space-3); font-size: var(--pz-fs-2xs); color: var(--pz-text-faint); margin-bottom: var(--pz-space-3); text-transform: uppercase; letter-spacing: 0.04em; }
.pz-card__title{ font-size: var(--pz-fs-md); margin-bottom: var(--pz-space-2); font-family: var(--pz-font-display); }
.pz-card__title a::after{ content: ""; position: absolute; inset: 0; }
.pz-card__excerpt{ font-size: var(--pz-fs-sm); color: var(--pz-text-muted); }

.pz-badge{ display: inline-flex; align-items: center; padding: var(--pz-space-1) var(--pz-space-3); border-radius: var(--pz-radius-pill); background: var(--pz-navy-100); color: var(--pz-navy); font-size: var(--pz-fs-2xs); font-weight: var(--pz-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; position: relative; z-index: 1; }
.pz-badge--trending{ background: var(--pz-yellow); color: var(--pz-navy); }
.pz-badge--trending svg{ width: 12px; height: 12px; }

/* ============ PUN CARD (single post + lists of puns) ============ */
.pz-pun-card{ background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); padding: var(--pz-space-6); position: relative; }
.pz-pun-card__number{ font-family: var(--pz-font-display); font-size: var(--pz-fs-xs); color: var(--pz-text-faint); font-weight: var(--pz-fw-bold); align-self: center; }
.pz-pun-card__text{ font-family: var(--pz-font-display); font-size: var(--pz-fs-lg); font-weight: var(--pz-fw-semibold); line-height: var(--pz-lh-snug); color: var(--pz-navy); margin: var(--pz-space-2) 0 var(--pz-space-5); }
.pz-pun-card__footer{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--pz-space-3); }
.pz-pun-card__actions{ display: flex; gap: var(--pz-space-2); flex-wrap: wrap; }

.pz-action-btn{ display: inline-flex; align-items: center; gap: var(--pz-space-2); padding: var(--pz-space-2) var(--pz-space-3); border-radius: var(--pz-radius-pill); border: 1px solid var(--pz-border); font-size: var(--pz-fs-xs); font-weight: var(--pz-fw-medium); color: var(--pz-text-muted); min-height: 44px; position: relative; z-index: 1; overflow: hidden; }
.pz-action-btn:hover{ border-color: var(--pz-navy); color: var(--pz-navy); }
.pz-action-btn.is-active{ background: var(--pz-yellow-100); border-color: var(--pz-yellow); color: var(--pz-navy-700); }
.pz-action-btn[data-pz-copy].is-copied{ background: var(--pz-success-bg); border-color: var(--pz-success); color: var(--pz-success); }
.pz-action-btn .pz-count{ font-size: var(--pz-fs-2xs); color: var(--pz-text-faint); }

/* Ripple effect for the copy button */
.pz-action-btn .pz-ripple{ position: absolute; border-radius: 50%; background: rgba(10,31,68,0.15); transform: scale(0); animation: pz-ripple 600ms var(--pz-ease-out); pointer-events: none; }
@keyframes pz-ripple{ to{ transform: scale(3); opacity: 0; } }

.pz-emoji-reactions{ display: flex; gap: var(--pz-space-1); }
.pz-emoji-btn{ font-size: 1.1rem; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pz-radius-pill); }
.pz-emoji-btn:hover{ background: var(--pz-bg-sunken); transform: scale(1.15); }
.pz-emoji-btn.is-active{ background: var(--pz-yellow-100); }

.pz-pun-card__tags{ display: flex; flex-wrap: wrap; gap: var(--pz-space-2); margin-bottom: var(--pz-space-4); }
.pz-pun-card__tags a{ font-size: var(--pz-fs-2xs); color: var(--pz-accent); background: var(--pz-accent-100); padding: 2px var(--pz-space-2); border-radius: var(--pz-radius-pill); }
.pz-pun-card__tags a:hover{ background: var(--pz-accent); color: #fff; }
.pz-pun-card__stats{ display: flex; gap: var(--pz-space-3); font-size: var(--pz-fs-2xs); color: var(--pz-text-faint); }
.pz-pun-card__emoji{ font-size: 1.4rem; line-height: 1; margin-bottom: var(--pz-space-2); display: inline-block; }

/* ============ AD SLOT ============ */
/* Fixed min-height reserved up front so ad networks never cause CLS,
   per Core Web Vitals requirements in the brief. */
.pz-ad-slot{ background: var(--pz-light-gray); border: 1px dashed var(--pz-border-strong); border-radius: var(--pz-radius-md); display: flex; align-items: center; justify-content: center; margin-block: var(--pz-space-6); overflow: hidden; }
.pz-ad-slot__label{ font-size: var(--pz-fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--pz-text-faint); }
.pz-ad-slot--header{ min-height: 90px; }
.pz-ad-slot--in-feed{ min-height: 250px; }
.pz-ad-slot--after-content{ min-height: 280px; }
.pz-ad-slot--sidebar{ min-height: 600px; }
.pz-ad-slot--footer{ min-height: 90px; }

/* ============ TOAST ============ */
.pz-toast{ position: fixed; left: 50%; bottom: var(--pz-space-6); transform: translate(-50%, 20px); background: var(--pz-navy); color: #fff; padding: var(--pz-space-3) var(--pz-space-5); border-radius: var(--pz-radius-pill); font-size: var(--pz-fs-sm); font-weight: var(--pz-fw-medium); box-shadow: var(--pz-shadow-lg); z-index: var(--pz-z-toast); opacity: 0; visibility: hidden; transition: all var(--pz-duration-base) var(--pz-ease-out); display: flex; align-items: center; gap: var(--pz-space-2); }
.pz-toast.is-visible{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.pz-toast svg{ color: var(--pz-yellow); flex-shrink: 0; }

/* ============ FAQ ACCORDION ============ */
.pz-accordion-item{ border-bottom: 1px solid var(--pz-border); }
.pz-accordion-item summary{ list-style: none; display: flex; justify-content: space-between; align-items: center; padding: var(--pz-space-5) 0; font-weight: var(--pz-fw-semibold); cursor: pointer; font-family: var(--pz-font-display); }
.pz-accordion-item summary::-webkit-details-marker{ display: none; }
.pz-accordion-item summary .pz-accordion-icon{ transition: transform var(--pz-duration-base) var(--pz-ease-out); flex-shrink: 0; }
.pz-accordion-item[open] summary .pz-accordion-icon{ transform: rotate(45deg); }
.pz-accordion-item p{ padding-bottom: var(--pz-space-5); color: var(--pz-text-muted); }

/* ============ NEWSLETTER ============ */
.pz-newsletter{ background: var(--pz-navy); color: #fff; border-radius: var(--pz-radius-lg); padding: var(--pz-space-8); text-align: center; position: relative; overflow: hidden; }
.pz-newsletter h2{ color: #fff; }
.pz-newsletter form{ display: flex; gap: var(--pz-space-3); max-width: 420px; margin-inline: auto; margin-top: var(--pz-space-5); position: relative; z-index: 1; }
.pz-newsletter input{ flex: 1; min-height: 48px; border-radius: var(--pz-radius-pill); border: none; padding: 0 var(--pz-space-4); }
@media (max-width: 480px){ .pz-newsletter form{ flex-direction: column; } }

/* ============ ARTICLE FURNITURE ============ */
.pz-reading-progress{ position: fixed; top: 0; left: 0; height: 3px; background: var(--pz-yellow); z-index: calc(var(--pz-z-header) + 1); width: 0%; transition: width 80ms linear; }
.pz-article-header{ text-align: center; max-width: var(--pz-container-narrow); margin-inline: auto; padding-block: var(--pz-space-7) var(--pz-space-6); }
.pz-article-header__meta{ display: flex; justify-content: center; gap: var(--pz-space-4); flex-wrap: wrap; font-size: var(--pz-fs-xs); color: var(--pz-text-faint); margin-top: var(--pz-space-4); }
.pz-toc{ background: var(--pz-bg-sunken); border-radius: var(--pz-radius-lg); padding: var(--pz-space-5); margin-bottom: var(--pz-space-7); }
.pz-toc summary{ font-weight: var(--pz-fw-semibold); cursor: pointer; font-size: var(--pz-fs-sm); }
.pz-toc ol{ list-style: decimal; padding-left: 1.2em; margin-top: var(--pz-space-3); }
.pz-toc li{ margin-bottom: var(--pz-space-2); font-size: var(--pz-fs-sm); }
.pz-back-to-top{ position: fixed; right: var(--pz-space-5); bottom: calc(var(--pz-space-5) + 64px); z-index: var(--pz-z-overlay); box-shadow: var(--pz-shadow-md); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--pz-duration-base) var(--pz-ease-out); background: var(--pz-surface); border: 1px solid var(--pz-border); }
.pz-back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.pz-post-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--pz-space-4); margin-bottom: var(--pz-space-8); }
.pz-post-nav a{ display: block; border: 1px solid var(--pz-border); border-radius: var(--pz-radius-md); padding: var(--pz-space-4); }
.pz-post-nav a:hover{ border-color: var(--pz-yellow); }
@media (max-width: 640px){ .pz-post-nav{ grid-template-columns: 1fr; } }

/* ============ STICKY MOBILE BOTTOM NAV ============ */
.pz-mobile-tabbar{ display: none; }
@media (max-width: 640px){
  .pz-mobile-tabbar{
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--pz-z-overlay);
    background: var(--pz-surface); border-top: 1px solid var(--pz-border);
    padding: var(--pz-space-2) var(--pz-space-2) max(var(--pz-space-2), env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .pz-mobile-tabbar a, .pz-mobile-tabbar button{ display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--pz-text-faint); min-width: 56px; padding: var(--pz-space-2); border-radius: var(--pz-radius-md); }
  .pz-mobile-tabbar a[aria-current="page"], .pz-mobile-tabbar .is-active{ color: var(--pz-navy); }
  body.has-mobile-tabbar{ padding-bottom: 64px; }
}

/* ============ FOOTER ============ */
.pz-footer{ background: var(--pz-navy); color: rgba(255,255,255,0.85); padding-block: var(--pz-space-9) var(--pz-space-6); margin-top: var(--pz-space-9); }
.pz-footer a{ color: rgba(255,255,255,0.85); }
.pz-footer a:hover{ color: var(--pz-yellow); }
.pz-footer__grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: var(--pz-space-6); margin-bottom: var(--pz-space-8); }
.pz-footer h5{ color: #fff; font-size: var(--pz-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--pz-space-4); }
.pz-footer li{ margin-bottom: var(--pz-space-3); font-size: var(--pz-fs-sm); }
.pz-footer__bottom{ border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--pz-space-5); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--pz-space-3); font-size: var(--pz-fs-xs); }
.pz-footer__social{ display: flex; gap: var(--pz-space-3); }
.pz-footer__social a{ width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.pz-footer__social a:hover{ background: var(--pz-yellow); color: var(--pz-navy); }
@media (max-width: 900px){ .pz-footer__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pz-footer__grid{ grid-template-columns: 1fr; } }

/* ============ BREADCRUMBS / PAGINATION ============ */
.pz-breadcrumbs{ font-size: var(--pz-fs-xs); color: var(--pz-text-faint); display: flex; gap: var(--pz-space-2); flex-wrap: wrap; margin-bottom: var(--pz-space-5); }
.pz-breadcrumbs a:hover{ color: var(--pz-navy); }
.pz-pagination{ display: flex; justify-content: center; gap: var(--pz-space-2); margin-top: var(--pz-space-8); }
.pz-pagination a, .pz-pagination span{ min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--pz-radius-md); border: 1px solid var(--pz-border); font-size: var(--pz-fs-sm); }
.pz-pagination .current{ background: var(--pz-navy); color: #fff; border-color: var(--pz-navy); }
.pz-pagination a:hover{ border-color: var(--pz-yellow); }

/* ============ 404 ============ */
.pz-404{ text-align: center; padding-block: var(--pz-space-10); }
.pz-404__code{ font-family: var(--pz-font-display); font-size: 6rem; color: var(--pz-yellow-100); line-height: 1; }

/* ============ FILTER / SORT BAR (category pages) ============ */
.pz-filter-bar{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--pz-space-3); background: var(--pz-surface); border: 1px solid var(--pz-border); border-radius: var(--pz-radius-lg); padding: var(--pz-space-4) var(--pz-space-5); margin-bottom: var(--pz-space-6); }
.pz-select{ border: 1px solid var(--pz-border-strong); border-radius: var(--pz-radius-md); padding: var(--pz-space-2) var(--pz-space-3); background: var(--pz-surface); min-height: 40px; }

/* ============ SKELETON ============ */
.pz-skeleton{ background: linear-gradient(90deg, var(--pz-bg-sunken) 25%, var(--pz-border) 37%, var(--pz-bg-sunken) 63%); background-size: 400% 100%; animation: pz-shimmer 1.4s ease infinite; border-radius: var(--pz-radius-md); }
@keyframes pz-shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }