/* =============================================================
   COMPONENTS — css/components.css
   Top bar, logo, footer layout, misc UI, wishlist animation.
   ============================================================= */

/* ══════════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════════ */
.pq-topbar {
  background:  var(--pq-green);
  color:       rgba(255,255,255,.9);
  font-size:   .78rem;
  font-weight: 500;
  line-height: 1;
}
.pq-topbar__inner {
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:           center;
  height:                36px;
  width:                 min(calc(100% - 2 * var(--pq-gutter)), var(--pq-max));
  margin-inline:         auto;
  gap:                   16px;
}

.pq-topbar__left  { display: flex; align-items: center; }
.pq-topbar__msg {
  display:     flex;
  align-items: center;
  gap:         7px;
  white-space: nowrap;
}
.pq-topbar__msg svg { opacity: .8; flex-shrink: 0; }
.pq-topbar__msg strong { color: #fff; font-weight: 700; }

.pq-topbar__center {
  display:         flex;
  align-items:     center;
  justify-content: center;
  white-space:     nowrap;
  font-weight:     600;
  color:           rgba(255,255,255,.85);
}

.pq-topbar__right { display: flex; justify-content: flex-end; }

.pq-region { position: relative; }
.pq-region__btn {
  display:     flex;
  align-items: center;
  gap:         7px;
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--pq-font);
  font-size:   .78rem;
  font-weight: 600;
  color:       rgba(255,255,255,.9);
  padding:     4px 0;
  transition:  color var(--pq-ease);
}
.pq-region__btn:hover { color: #fff; }
.pq-flag { width: 20px; height: 14px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.pq-region__dropdown {
  display:       none;
  position:      absolute;
  top:           calc(100% + 10px);
  right:         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:       6px;
  z-index:       500;
}
.pq-region:hover .pq-region__dropdown { display: block; }
.pq-region__dropdown::before { content: ''; position: absolute; top: -6px; right: 16px; width: 11px; height: 11px; background: var(--pq-white); border-left: 1px solid var(--pq-border); border-top: 1px solid var(--pq-border); transform: rotate(45deg); }
.pq-region__option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--pq-radius); color: var(--pq-ink); font-size: .85rem; font-weight: 600; }
.pq-region__option--soon { opacity: .65; cursor: default; pointer-events: none; }
.pq-region__badge { margin-left: auto; background: var(--pq-sand); border: 1px solid var(--pq-border); border-radius: 999px; padding: 2px 8px; font-size: .68rem; font-weight: 700; color: var(--pq-muted); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   LOGO
   ══════════════════════════════════════════════════════════════ */
.pq-logo img,
.pq-logo .custom-logo-link img,
.custom-logo-link img { height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.custom-logo-link { display: inline-flex; line-height: 0; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.pq-footer {
  background:  var(--pq-white);
  color:       var(--pq-ink);
  border-top:  1px solid var(--pq-border);
  padding-top: 0;
}

/* Trust bar */
.pq-footer__trustbar {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom:         1px solid var(--pq-border);
}
.pq-footer__trust-item {
  display:      flex;
  align-items:  center;
  gap:          14px;
  padding:      22px 24px;
  border-right: 1px solid var(--pq-border);
}
.pq-footer__trust-item:last-child { border-right: none; }

/* Icon box — overridden further by fixes-and-upgrades for SVG sizing */
.pq-footer__trust-icon {
  width:         44px;
  height:        44px;
  border-radius: 12px;
  background:    var(--pq-sand);
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
  color:         var(--pq-green);
}
.pq-footer__trust-icon svg { width: 22px; height: 22px; }

.pq-footer__trust-item > div { display: flex; flex-direction: column; gap: 3px; }
.pq-footer__trust-item strong { font-size: .88rem; font-weight: 800; color: var(--pq-ink); line-height: 1.3; }
.pq-footer__trust-item span   { font-size: .78rem; color: var(--pq-muted); }

/* Main grid */
.pq-footer__main {
  display:               grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
  gap:                   clamp(20px,3vw,48px);
  padding:               clamp(36px,5vw,64px) 0 clamp(32px,4vw,56px);
  border-bottom:         1px solid var(--pq-border);
}

.pq-footer__brand p { font-size: .875rem; color: var(--pq-muted); line-height: 1.65; margin: 14px 0 0; max-width: 280px; }

/* Social links */
.pq-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.pq-footer__social a {
  width:         36px; height: 36px;
  border-radius: 50%;
  border:        1.5px solid var(--pq-border);
  display:       grid;
  place-items:   center;
  color:         var(--pq-muted);
  transition:    border-color var(--pq-ease), color var(--pq-ease), background var(--pq-ease);
}
.pq-footer__social a svg { width: 17px; height: 17px; }
.pq-footer__social a:hover { border-color: var(--pq-green); color: var(--pq-green); background: var(--pq-sand); }

/* Link columns */
.pq-footer__col h4 { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pq-muted); margin-bottom: 16px; }
.pq-footer__col ul { list-style: none; margin: 0; padding: 0; }
.pq-footer__col ul li { margin-bottom: 10px; }
.pq-footer__col a { font-size: .875rem; color: var(--pq-ink); font-weight: 500; transition: color var(--pq-ease); text-decoration: none; }
.pq-footer__col a:hover { color: var(--pq-green); }

/* Newsletter */
.pq-footer__col--newsletter > p { font-size: .875rem; color: var(--pq-muted); line-height: 1.6; margin-bottom: 14px; }
.pq-footer__fine { font-size: .74rem !important; color: var(--pq-muted) !important; margin-top: 8px; }

.pq-newsletter {
  display:       flex;
  border:        1.5px solid var(--pq-border);
  border-radius: 999px;
  overflow:      hidden;
  background:    var(--pq-white);
  transition:    border-color var(--pq-ease);
}
.pq-newsletter:focus-within { border-color: var(--pq-green); }
.pq-newsletter input { flex: 1; border: 0; padding: 11px 14px; font: inherit; font-size: .85rem; background: transparent; outline: none; min-width: 0; color: var(--pq-ink); }
.pq-newsletter button {
  width:         40px; height: 40px;
  border:        0;
  border-radius: 50%;
  background:    var(--pq-green);
  color:         #fff;
  cursor:        pointer;
  flex-shrink:   0;
  margin:        3px;
  display:       grid;
  place-items:   center;
  transition:    background var(--pq-ease);
}
.pq-newsletter button svg { width: 16px; height: 16px; }
.pq-newsletter button:hover { background: var(--pq-ink); }

/* Payment badges */
.pq-footer__pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pq-footer__pay span { background: var(--pq-sand); border: 1px solid var(--pq-border); border-radius: 6px; padding: 4px 8px; font-size: .68rem; font-weight: 700; color: var(--pq-muted); letter-spacing: .04em; }

/* Bottom bar */
.pq-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0; font-size: .8rem; color: var(--pq-muted); }
.pq-footer__legal  { display: flex; gap: 20px; }
.pq-footer__legal a { font-size: .8rem; color: var(--pq-muted); transition: color var(--pq-ease); }
.pq-footer__legal a:hover { color: var(--pq-green); }

/* Responsive footer */
@media (max-width: 1100px) {
  .pq-footer__main { grid-template-columns: 1fr 1fr 1fr; }
  .pq-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .pq-footer__trustbar { grid-template-columns: repeat(2, 1fr); }
  .pq-footer__trust-item:nth-child(2) { border-right: none; }
  .pq-footer__trust-item:nth-child(3) { border-top: 1px solid var(--pq-border); }
  .pq-footer__trust-item:nth-child(4) { border-top: 1px solid var(--pq-border); border-right: none; }
}
@media (max-width: 640px) {
  .pq-footer__main { grid-template-columns: 1fr 1fr; }
  .pq-footer__col--newsletter { grid-column: 1 / -1; }
  .pq-footer__trustbar { grid-template-columns: 1fr; }
  .pq-footer__trust-item { border-right: none !important; border-top: 1px solid var(--pq-border); }
  .pq-footer__trust-item:first-child { border-top: none; }
}

/* ══════════════════════════════════════════════════════════════
   WISHLIST HEART ANIMATION
   ══════════════════════════════════════════════════════════════ */
@keyframes pqHeartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.4); }
  65%  { transform: scale(.88); }
  100% { transform: scale(1); }
}
.pq-card-wishlist.pq-heart-pop { animation: pqHeartPop .38s cubic-bezier(.36,.07,.19,.97); }

/* ══════════════════════════════════════════════════════════════
   FALLBACK LOGO / MISC
   ══════════════════════════════════════════════════════════════ */
.pq-logo, .pq-footer__logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.035em; color: var(--pq-ink); text-decoration: none; }
.pq-logo-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--pq-green); color: #fff; display: grid; place-items: center; font-weight: 900; }
.pq-logo-text { font-size: 1.25rem; line-height: 1; }
.pq-logo-text span { color: var(--pq-green-light); }
.pq-footer__logo .pq-logo-mark { width: 34px; height: 34px; }
.pq-footer__logo .pq-logo-text { font-size: 1.05rem; }

.pq-footer-menu { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pq-footer-menu a { color: var(--pq-muted); font-size: .82rem; text-decoration: none; }
.pq-footer-menu a:hover { color: var(--pq-green); }

.pq-page-shell { background: var(--pq-white); border: 1px solid var(--pq-border); border-radius: var(--pq-radius-lg); box-shadow: var(--pq-shadow); padding: clamp(24px,4vw,48px); }
.pq-page-header h1 { font-size: clamp(2rem,4vw,3.5rem); line-height: 1; letter-spacing: -.055em; margin-bottom: 18px; }
.pq-page-content > * + * { margin-top: 1rem; }
.pq-post-card { padding: 22px; border: 1px solid var(--pq-border); border-radius: 16px; background: var(--pq-white); box-shadow: var(--pq-shadow); margin-bottom: 16px; }