/* =============================================================
   HEADER — css/header.css
   ============================================================= */

/* ── Sticky shell ─────────────────────────────────────────────── */
.pq-header {
  position:        sticky;
  top:             0;
  z-index:         200;
  background:      rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:   1px solid var(--pq-border);
  transition:      box-shadow .22s ease;
}
.pq-header.is-scrolled { box-shadow: 0 2px 16px rgba(16,37,41,.08); }

.pq-header__inner {
  height:          70px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
}

/* ── Logo ─────────────────────────────────────────────────────── */
.pq-logo {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  font-weight:     900;
  font-size:       1.35rem;
  letter-spacing:  -.04em;
  flex-shrink:     0;
  text-decoration: none;
  color:           var(--pq-ink);
}
.pq-logo img,
.pq-logo .custom-logo-link img { height: 38px; width: auto; max-width: 180px; object-fit: contain; }
.pq-logo .custom-logo-link     { display: inline-flex; line-height: 0; }
.pq-logo span span             { color: var(--pq-orange); }

/* ── Desktop nav ──────────────────────────────────────────────── */
.pq-nav-wrap {
  flex:            1;
  display:         flex;
  justify-content: center;
  overflow:        visible;
}

ul.pq-nav {
  display:     flex;
  align-items: center;
  gap:         2px;
  list-style:  none;
  margin: 0; padding: 0;
}

ul.pq-nav > .menu-item { position: relative; }

ul.pq-nav > .menu-item > a {
  display:         flex;
  align-items:     center;
  gap:             4px;
  padding:         8px 13px;
  font-size:       .865rem;
  font-weight:     600;
  border-radius:   999px;
  color:           var(--pq-ink);
  transition:      background var(--pq-ease), color var(--pq-ease);
  white-space:     nowrap;
  text-decoration: none;
}
ul.pq-nav > .menu-item > a:hover,
ul.pq-nav > .menu-item.current-menu-item  > a,
ul.pq-nav > .menu-item.current-menu-parent > a {
  background: var(--pq-sand);
  color:      var(--pq-green);
}

ul.pq-nav > .menu-item-has-children > a::after {
  content:     '';
  display:     inline-block;
  width: 5px; height: 5px;
  border:      1.5px solid currentColor;
  border-top:  none; border-left: none;
  transform:   rotate(45deg) translateY(-2px);
  transition:  transform var(--pq-ease);
  margin-left: 2px;
}
ul.pq-nav > .menu-item-has-children:hover > a::after {
  transform: rotate(225deg) translateY(0);
}

ul.pq-nav .sub-menu {
  display:       none;
  position:      absolute;
  top:           calc(100% + 8px);
  left:          0;
  min-width:     200px;
  background:    var(--pq-white);
  border:        1px solid var(--pq-border);
  border-radius: var(--pq-radius-lg);
  box-shadow:    var(--pq-shadow-lg);
  padding:       8px;
  z-index:       300;
  list-style:    none;
  margin: 0;
}
ul.pq-nav .menu-item:hover > .sub-menu { display: block; }
ul.pq-nav .sub-menu .menu-item > a {
  display: block; padding: 9px 14px; font-size: .85rem; font-weight: 600;
  border-radius: var(--pq-radius); color: var(--pq-ink);
  transition: background var(--pq-ease); text-decoration: none;
}
ul.pq-nav .sub-menu .menu-item > a:hover { background: var(--pq-sand); }

/* ── Right actions ────────────────────────────────────────────── */
.pq-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

.pq-action-btn {
  position:      relative;
  display:       grid;
  place-items:   center;
  width:         38px; height: 38px;
  border-radius: 50%;
  background:    transparent;
  border:        none;
  cursor:        pointer;
  color:         var(--pq-muted);
  transition:    color var(--pq-ease), background var(--pq-ease);
  text-decoration: none;
  flex-shrink:   0;
}
.pq-action-btn svg  { width: 20px; height: 20px; }
.pq-action-btn:hover { color: var(--pq-green); background: var(--pq-sand); }

.pq-wishlist-count {
  position:       absolute;
  top: 1px; right: 1px;
  min-width:      17px; height: 17px;
  padding:        0 3px;
  border-radius:  999px;
  background:     var(--pq-orange);
  color:          #fff;
  font-size:      .62rem; font-weight: 700;
  display:        grid; place-items: center;
  line-height:    1;
  opacity:        0;
  transform:      scale(.6);
  transition:     opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.pq-wishlist-count.has-items { opacity: 1; transform: scale(1); }

.pq-cart-toggle {
  display:       flex;
  align-items:   center;
  gap:           7px;
  border:        1.5px solid var(--pq-border);
  background:    var(--pq-white);
  border-radius: 999px;
  padding:       7px 14px;
  font-family:   var(--pq-font);
  font-weight:   700;
  font-size:     .85rem;
  cursor:        pointer;
  transition:    border-color var(--pq-ease);
  color:         var(--pq-ink);
}
.pq-cart-toggle svg   { width: 18px; height: 18px; }
.pq-cart-toggle:hover { border-color: var(--pq-green); color: var(--pq-green); }

.pq-cart-count {
  display:       inline-grid;
  place-items:   center;
  min-width:     19px; height: 19px;
  padding:       0 4px;
  border-radius: 999px;
  background:    var(--pq-orange);
  color:         #fff;
  font-size:     .68rem; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   HAMBURGER BUTTON — animates to × when .is-active
   ══════════════════════════════════════════════════════════════ */
.pq-menu {
  display:        none;        /* shown via media query below */
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  gap:            0;
  width:          40px;
  height:         40px;
  padding:        0;
  background:     none;
  border:         1.5px solid var(--pq-border);
  border-radius:  10px;
  cursor:         pointer;
  flex-shrink:    0;
  transition:     background .18s ease, border-color .18s ease;
  position:       relative;
}
.pq-menu:hover { background: var(--pq-sand); border-color: var(--pq-green); }

/* Three bars */
.pq-menu span {
  display:       block;
  width:         18px;
  height:        2px;
  background:    var(--pq-ink);
  border-radius: 2px;
  position:      absolute;
  left:          50%;
  transform:     translateX(-50%);
  transition:    transform .25s ease, opacity .2s ease, top .25s ease;
}

/* Resting positions */
.pq-menu span:nth-child(1) { top: 12px; }
.pq-menu span:nth-child(2) { top: 19px; }
.pq-menu span:nth-child(3) { top: 26px; }

/* Active (menu open) → × shape */
.pq-menu.is-active span:nth-child(1) {
  top:       19px;
  transform: translateX(-50%) rotate(45deg);
}
.pq-menu.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
}
.pq-menu.is-active span:nth-child(3) {
  top:       19px;
  transform: translateX(-50%) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE NAV PANEL
   ══════════════════════════════════════════════════════════════ */
.pq-mobile {
  /* Hidden by default — JS adds .is-open */
  display:    none;
  position:   absolute;
  top:        100%;       /* directly below the header */
  left:       0;
  right:      0;
  z-index:    199;        /* below header z-index */
  background: #fff;
  border-top: 1px solid var(--pq-border);
  border-bottom: 1px solid var(--pq-border);
  box-shadow: 0 12px 36px rgba(16,37,41,.10);
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Shown state — triggered by JS */
.pq-mobile.is-open {
  display: block;
}

/* Prevent body scroll when menu is open */
body.pq-menu-open { overflow: hidden; }

.pq-mobile-list {
  list-style: none;
  margin:     0;
  padding:    8px 16px 16px;
}

.pq-mobile-list .menu-item { }

.pq-mobile-list .menu-item > a {
  display:         flex;
  align-items:     center;
  padding:         14px 12px;
  font-size:       1rem;
  font-weight:     700;
  color:           var(--pq-ink);
  text-decoration: none;
  border-radius:   12px;
  transition:      background .15s ease, color .15s ease;
  border-bottom:   1px solid var(--pq-border);
}
.pq-mobile-list .menu-item:last-child > a { border-bottom: none; }
.pq-mobile-list .menu-item > a:hover,
.pq-mobile-list .menu-item.current-menu-item > a {
  background: var(--pq-sand);
  color:      var(--pq-green);
}

/* Sub-menus in mobile nav */
.pq-mobile-list .sub-menu {
  list-style:   none;
  padding:      0 0 4px 16px;
  margin:       0;
}
.pq-mobile-list .sub-menu .menu-item > a {
  font-size:   .88rem;
  font-weight: 600;
  padding:     10px 12px;
}

/* ══════════════════════════════════════════════════════════════
   SHARED DRAWER STYLES (cart + wishlist)
   ══════════════════════════════════════════════════════════════ */
.pq-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(16,37,41,.42);
  z-index:        400;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .25s ease;
}
.pq-overlay.is-open { opacity: 1; pointer-events: auto; }

.pq-cart-drawer,
.pq-wishlist-drawer {
  position:       fixed;
  top:            0; right: 0;
  height:         100dvh;
  width:          min(400px, 94vw);
  background:     var(--pq-white);
  z-index:        401;
  transform:      translateX(105%);
  transition:     transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow:     -12px 0 50px rgba(16,37,41,.14);
  display:        flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

.pq-cart-open     .pq-cart-overlay,
.pq-cart-open     .pq-cart-drawer     { transform: translateX(0); }
.pq-wishlist-open .pq-wishlist-overlay,
.pq-wishlist-open .pq-wishlist-drawer { transform: translateX(0); }

.pq-cart-open     .pq-cart-overlay     { opacity: 1; pointer-events: auto; }
.pq-wishlist-open .pq-wishlist-overlay { opacity: 1; pointer-events: auto; }

.pq-drawer__head {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         18px 20px;
  border-bottom:   1px solid var(--pq-border);
  font-size:       1.02rem;
  font-weight:     800;
  flex-shrink:     0;
}

.pq-drawer__close {
  display:       grid;
  place-items:   center;
  width:         36px; height: 36px;
  border-radius: 50%;
  border:        1px solid var(--pq-border);
  background:    var(--pq-white);
  cursor:        pointer;
  color:         var(--pq-muted);
  transition:    background var(--pq-ease), color var(--pq-ease);
}
.pq-drawer__close svg  { width: 16px; height: 16px; }
.pq-drawer__close:hover { background: var(--pq-sand); color: var(--pq-ink); }

.pq-drawer__body {
  flex:       1;
  overflow-y: auto;
  padding:    18px 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pq-mini-cart .woocommerce-mini-cart__buttons a {
  display: block; text-align: center; margin: 7px 0;
}

/* ── Wishlist items ─────────────────────────────────────────── */
.pq-wishlist-empty {
  text-align: center; color: var(--pq-muted);
  font-size: .9rem; padding: 32px 0; line-height: 1.6;
}
.pq-wishlist-item {
  display:       grid;
  grid-template-columns: 72px minmax(0,1fr) auto;
  gap:           12px;
  align-items:   center;
  padding:       14px 0;
  border-bottom: 1px solid var(--pq-border);
}
.pq-wishlist-item:last-child { border-bottom: none; }
.pq-wishlist-item__img {
  width: 72px; height: 72px; border-radius: 12px;
  overflow: hidden; background: var(--pq-sand);
}
.pq-wishlist-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pq-wishlist-item__info { min-width: 0; }
.pq-wishlist-item__name {
  font-size: .88rem; font-weight: 800; line-height: 1.25;
  color: var(--pq-ink); text-decoration: none; display: block; margin-bottom: 4px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pq-wishlist-item__price { font-size: .85rem; font-weight: 700; color: var(--pq-green); }
.pq-wishlist-item__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.pq-wishlist-item__atc {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--pq-green); color: #fff;
  font-size: .76rem; font-weight: 800; border: none; cursor: pointer;
  transition: background var(--pq-ease); white-space: nowrap; text-decoration: none;
}
.pq-wishlist-item__atc:hover { background: var(--pq-ink); }
.pq-wishlist-item__remove {
  background: none; border: none; color: var(--pq-muted);
  cursor: pointer; font-size: .76rem; font-weight: 700;
  padding: 2px 0; transition: color var(--pq-ease);
}
.pq-wishlist-item__remove:hover { color: #c0392b; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .pq-nav-wrap { display: none; }
  .pq-menu     { display: flex; }

  /* Header must be position:relative so the absolute mobile nav
     positions correctly relative to it */
  .pq-header { position: sticky; }
  .pq-header__inner { position: relative; }
}

@media (max-width: 600px) {
  .pq-cart-toggle span:not(.pq-cart-count) { display: none; }
  .pq-cart-toggle { padding: 7px 10px; }
  .pq-logo img,
  .pq-logo .custom-logo-link img { height: 32px; }
}

/* Admin bar offsets */
body.admin-bar .pq-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .pq-header { top: 46px; }
}