/* =============================================================
   fixes-and-upgrades.css — PawQuest single source of truth
   Loaded LAST.
   ============================================================= */

/* ══════════════════════════════════════════════════════════════
   SCROLL LOCK
   ══════════════════════════════════════════════════════════════ */
html.pq-scroll-locked,
body.pq-scroll-locked {
  overflow:     hidden !important;
  touch-action: none  !important;
}

/* ══════════════════════════════════════════════════════════════
   FOCUS-VISIBLE
   ══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline:        2px solid var(--pq-green);
  outline-offset: 3px;
  border-radius:  4px;
}

/* ══════════════════════════════════════════════════════════════
   CATEGORY GRID — placeholder
   ══════════════════════════════════════════════════════════════ */
.pq-cat-card__placeholder {
  background:      linear-gradient(145deg, var(--pq-sage), var(--pq-blue));
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2rem;
  height:          100%;
}
.pq-cat-card__placeholder::after { content: '🐾'; }

/* ══════════════════════════════════════════════════════════════
   BUNDLE GRID
   ══════════════════════════════════════════════════════════════ */
.pq-bundle-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pq-bundle .pq-btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.1); }
.pq-bundle .pq-btn--ghost:hover { background: rgba(255,255,255,.22); border-color: #fff; }

/* ══════════════════════════════════════════════════════════════
   PRODUCT LOOP CARDS — square image, full-bleed
   ══════════════════════════════════════════════════════════════ */

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

.woocommerce ul.products li.product {
  float:          none     !important;
  width:          auto     !important;
  margin:         0        !important;
  padding:        0        !important;
  display:        flex     !important;
  flex-direction: column;
  position:       relative;
  overflow:       hidden;
  border:         1px solid rgba(36,61,44,.12);
  border-radius:  20px;
  background:     #fff;
  box-shadow:     0 8px 26px rgba(17,34,25,.07);
  transition:     transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.woocommerce ul.products li.product:hover {
  transform:    translateY(-4px);
  box-shadow:   0 18px 44px rgba(17,34,25,.12);
  border-color: rgba(36,61,44,.24);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  color:           inherit;
}

.woocommerce ul.products li.product img {
  display:         block      !important;
  width:           100%       !important;
  height:          auto       !important;
  aspect-ratio:    1 / 1      !important;
  object-fit:      cover      !important;
  object-position: center     !important;
  background:      #f4f7f4;
  border-radius:   18px 18px 0 0 !important;
  padding:         0          !important;
  margin:          0          !important;
  transition:      transform .28s ease;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.04); }

.pq-product-pill {
  position:      absolute;
  top:           12px; left: 12px;
  z-index:       3;
  display:       inline-block;
  padding:       5px 10px;
  border-radius: 999px;
  font-size:     .7rem;
  font-weight:   800;
  letter-spacing: .04em;
  pointer-events: none;
}
.pq-product-pill--sale     { background: #e8f2ec; color: var(--pq-green); }
.pq-product-pill--featured { background: #fff3e0; color: #b45309; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size:   .9rem    !important;
  font-weight: 800      !important;
  line-height: 1.25;
  min-height:  40px;
  margin:      12px 14px 6px !important;
  padding:     0        !important;
  color:       var(--pq-ink);
}

.woocommerce ul.products li.product .price {
  display:     block;
  margin:      0 14px 10px !important;
  color:       var(--pq-ink) !important;
  font-weight: 850 !important;
  font-size:   .95rem !important;
}

.pq-card-trust {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
  margin:      0 14px 10px;
}
.pq-card-trust span {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  border:        1px solid rgba(36,61,44,.1);
  background:    #f5faf5;
  border-radius: 999px;
  padding:       5px 9px;
  font-size:     11px;
  font-weight:   800;
  color:         #4c6154;
}
.pq-stock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1f8cff;
  display: inline-block;
  flex-shrink: 0;
  animation: pqPulseDot 1.5s infinite;
}
@keyframes pqPulseDot {
  70%  { box-shadow: 0 0 0 7px rgba(31,140,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,140,255,0); }
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart {
  display:         flex        !important;
  align-items:     center;
  justify-content: center;
  width:           calc(100% - 28px) !important;
  min-height:      44px;
  margin:          auto 14px 14px !important;
  border-radius:   999px !important;
  background:      var(--pq-green) !important;
  color:           #fff          !important;
  font-weight:     850           !important;
  font-size:       .84rem;
  text-decoration: none;
  border:          none !important;
  transition:      background .18s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: var(--pq-ink) !important;
}
.woocommerce ul.products li.product .added_to_cart {
  background: #eef6ef !important;
  color:      var(--pq-green) !important;
}

/* ══════════════════════════════════════════════════════════════
   WISHLIST HEART on product cards
   ══════════════════════════════════════════════════════════════ */
.pq-card-wishlist {
  position:      absolute;
  top:           10px; right: 10px;
  z-index:       4;
  width:         34px; height: 34px;
  border-radius: 50%;
  background:    rgba(255,255,255,.88);
  border:        1px solid rgba(36,61,44,.12);
  cursor:        pointer;
  display:       grid;
  place-items:   center;
  box-shadow:    0 4px 12px rgba(0,0,0,.08);
  transition:    background .18s ease, border-color .18s ease, transform .18s ease;
  backdrop-filter: blur(4px);
}
.pq-card-wishlist svg { width: 16px; height: 16px; stroke: var(--pq-muted); transition: stroke .18s ease, fill .18s ease; }
.pq-card-wishlist:hover,
.pq-card-wishlist.is-wishlisted {
  background:   #fff0f0;
  border-color: rgba(224,80,80,.38);
  transform:    scale(1.08);
}
.pq-card-wishlist.is-wishlisted svg { stroke: #e05050; fill: #e05050; }
.pq-card-wishlist:hover svg { stroke: #e05050; }

/* ══════════════════════════════════════════════════════════════
   ARCHIVE GRID — responsive
   ══════════════════════════════════════════════════════════════ */
body.post-type-archive-product .woocommerce ul.products,
body.tax-product_cat            .woocommerce ul.products,
body.tax-product_tag            .woocommerce ul.products {
  display:               grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap:                   20px !important;
}
@media (max-width: 1200px) {
  body.post-type-archive-product .woocommerce ul.products,
  body.tax-product_cat            .woocommerce ul.products,
  body.tax-product_tag            .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
@media (max-width: 720px) {
  body.post-type-archive-product .woocommerce ul.products,
  body.tax-product_cat            .woocommerce ul.products,
  body.tax-product_tag            .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
  }
}
@media (max-width: 400px) {
  body.post-type-archive-product .woocommerce ul.products,
  body.tax-product_cat            .woocommerce ul.products,
  body.tax-product_tag            .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   POPULAR PRODUCTS RAIL (homepage)
   ══════════════════════════════════════════════════════════════ */
.pq-popular-products__rail {
  overflow-x:            auto;
  overflow-y:            visible;
  overscroll-behavior-x: contain;
  padding-bottom:        8px;
  scrollbar-width:       thin;
  scrollbar-color:       var(--pq-border) transparent;
}
@media (min-width: 981px) {
  .pq-popular-products__rail { overflow: visible; }
  .pq-popular-products__rail ul.products {
    display:               grid   !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap:                   22px   !important;
    width:                 100%   !important;
  }
  .pq-popular-products__rail ul.products li.product { flex: none !important; min-width: 0 !important; }
}
@media (max-width: 980px) {
  .pq-popular-products__rail ul.products {
    display:   flex     !important;
    flex-wrap: nowrap   !important;
    gap:       14px     !important;
    width:     max-content !important;
  }
  .pq-popular-products__rail ul.products li.product {
    flex:  0 0 min(74vw, 280px) !important;
    width: min(74vw, 280px)     !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT SHELL
   ══════════════════════════════════════════════════════════════ */
.single-product .pq-single-shell {
  display:               grid;
  grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr);
  gap:                   clamp(24px,4vw,52px);
  align-items:           start;
  padding:               clamp(14px,2.4vw,28px);
}
@media (min-width: 761px) {
  .single-product .pq-single-shell .summary { position: sticky; top: 108px; align-self: start; }
}
@media (max-width: 760px) {
  .single-product .pq-single-shell {
    grid-template-columns: 1fr !important;
    gap:     0   !important;
    padding: 0   !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT GALLERY — Flexslider-compatible

   DESKTOP: flex-row — thumbnail column left, main image right.
   MOBILE:  the gallery becomes a SWIPEABLE FULL-WIDTH SLIDER.
            We bypass Flexslider's column layout entirely and
            let the user swipe through full-width images, with
            a small thumbnail strip below.

   KEY FIX for blank main image on mobile:
   Flexslider JS sets `.flex-viewport` height = slide image height.
   If the container width isn't resolved when JS runs (e.g. the
   gallery is in a flex column with no explicit width), the image
   reports 0 natural height → viewport height = 0 → blank box.
   Solution: give the gallery a known width context BEFORE
   Flexslider measures it, and ensure the image has a reliable
   aspect-ratio container so it always has height.
   ══════════════════════════════════════════════════════════════ */

/* ── Desktop gallery shell ────────────────────────────────── */
.single-product .woocommerce-product-gallery {
  display:        flex        !important;
  flex-direction: row         !important;
  align-items:    flex-start  !important;
  gap:            12px        !important;
  background:     #fff;
  border-radius:  20px;
  border:         1px solid var(--pq-border);
  padding:        16px;
  box-shadow:     var(--pq-shadow);
  position:       relative;
  /* overflow must NOT be hidden — Flexslider needs to measure */
}

/* Zoom icon */
.single-product .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 8;
}

/* ── Thumbnail strip (left on desktop, bottom on mobile) ──── */
.single-product .flex-control-nav.flex-control-thumbs {
  order:          0;
  flex:           0 0 80px  !important;
  width:          80px      !important;
  min-width:      80px      !important;
  max-width:      80px      !important;
  display:        flex      !important;
  flex-direction: column    !important;
  gap:            6px       !important;
  list-style:     none      !important;
  margin:         0         !important;
  padding:        0         !important;
  max-height:     500px     !important;
  overflow-y:     auto      !important;
  overflow-x:     hidden    !important;
  scrollbar-width: thin;
  align-self:     flex-start !important;
}

.single-product .flex-control-thumbs li {
  flex:          0 0 auto !important;
  width:         100%     !important;
  float:         none     !important;
  display:       block    !important;
  border:        2px solid transparent;
  border-radius: 8px;
  overflow:      hidden;
  background:    #f7f8f5;
  cursor:        pointer;
  transition:    border-color .15s ease;
  aspect-ratio:  1 / 1;
}
.single-product .flex-control-thumbs li:hover  { border-color: var(--pq-green); }

.single-product .flex-control-thumbs img {
  display:      block    !important;
  width:        100%     !important;
  height:       100%     !important;
  aspect-ratio: 1 / 1    !important;
  object-fit:   cover    !important;
  opacity:      .55      !important;
  transition:   opacity .15s ease;
}
.single-product .flex-control-thumbs img.flex-active { opacity: 1 !important; }
.single-product .flex-control-thumbs li:has(img.flex-active) { border-color: var(--pq-green); }
.single-product .flex-control-thumbs img:hover { opacity: .85 !important; }

/* ── Main viewport (right / top) ─────────────────────────── */
.single-product .woocommerce-product-gallery__wrapper {
  order:     1;
  flex:      1 1 0% !important;
  min-width: 0;
}

.single-product .flex-viewport {
  overflow: hidden !important;
  width:    100%   !important;
}

/* Product images in slides */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image a > img {
  display:         block      !important;
  width:           100%       !important;
  height:          auto       !important;
  max-height:      580px      !important;
  aspect-ratio:    1 / 1      !important;
  object-fit:      contain    !important;
  object-position: center     !important;
  background:      #f7f8f5;
  border-radius:   10px;
}

.single-product .wp-post-image {
  display:         block      !important;
  width:           100%       !important;
  height:          auto       !important;
  max-height:      580px      !important;
  aspect-ratio:    1 / 1      !important;
  object-fit:      contain    !important;
  object-position: center     !important;
  background:      #f7f8f5;
  border-radius:   10px;
}

/* Zoom overlay — always hidden */
.single-product .woocommerce-product-gallery__image img.zoomImg {
  opacity:      0          !important;
  visibility:   hidden     !important;
  max-height:   none       !important;
  aspect-ratio: auto       !important;
  border-radius: 0;
  background:   transparent;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE GALLERY — complete rethink
   ══════════════════════════════════════════════════════════════

   The problem: Flexslider JS measures the container width to
   set slide widths. On mobile in a flex-column layout the
   wrapper has no established width context before JS runs,
   so it calculates height = 0 → blank white box.

   Fix strategy:
   1. Remove the gallery border/padding/shadow on mobile (the
      image IS the visual — no need for a card wrapper)
   2. Force the gallery to be full-width block before Flexslider
      runs by making it block, not flex-column
   3. Give the viewport an explicit min-height as a fallback
   4. Move thumbnails below as a horizontal scroll strip
   5. Hide the zoom trigger on mobile (it's unusable)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* Shell — flat, no card styling, full bleed */
  .single-product .woocommerce-product-gallery {
    flex-direction: column  !important;
    gap:            0       !important;
    padding:        0       !important;
    border:         none    !important;
    border-radius:  0       !important;
    box-shadow:     none    !important;
    background:     #f7f8f5 !important;
    width:          100%    !important;
  }

  /* Main viewport — full width, reliable height */
  .single-product .woocommerce-product-gallery__wrapper {
    order:   0 !important;
    width:   100% !important;
    flex:    none !important;
  }

  .single-product .flex-viewport {
    width:      100%  !important;
    min-height: 280px !important; /* fallback if Flexslider measures too early */
  }

  /* Force images to be square and visible */
  .single-product .woocommerce-product-gallery__image img,
  .single-product .woocommerce-product-gallery__image a > img,
  .single-product .wp-post-image {
    width:        100%    !important;
    height:       auto    !important;
    max-height:   none    !important;  /* remove max-height — let aspect-ratio rule */
    aspect-ratio: 1 / 1   !important;
    object-fit:   contain !important;
    background:   #f7f8f5;
    border-radius: 0      !important;
    display:      block   !important;
  }

  /* Thumbnail row — horizontal scroll strip below image */
  .single-product .flex-control-nav.flex-control-thumbs {
    order:          1         !important;
    flex:           none      !important;
    width:          100%      !important;
    max-width:      100%      !important;
    min-width:      0         !important;
    flex-direction: row       !important;
    max-height:     none      !important;
    overflow-x:     auto      !important;
    overflow-y:     hidden    !important;
    padding:        10px 12px !important;
    gap:            8px       !important;
    background:     #fff;
    border-top:     1px solid var(--pq-border);
    scrollbar-width: none;
  }
  .single-product .flex-control-thumbs li {
    flex:      0 0 60px !important;
    width:     60px     !important;
    min-width: 60px     !important;
    height:    60px     !important;
    border-radius: 8px  !important;
  }
  .single-product .flex-control-thumbs img {
    width:  60px !important;
    height: 60px !important;
  }

  /* Hide zoom trigger on mobile — too small to be useful */
  .single-product .woocommerce-product-gallery__trigger {
    display: none !important;
  }

  /* Summary section — padding below the gallery */
  .single-product .summary {
    padding: 16px 16px 24px !important;
  }

  /* Product title */
  .single-product .pq-single-shell .summary .product_title {
    font-size: clamp(1.3rem, 6vw, 1.7rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  /* Price */
  .single-product .summary .price {
    font-size: 1.15rem !important;
    margin-bottom: 14px !important;
  }

  /* Variations form */
  .single-product .variations_form .variations td,
  .single-product .variations_form .variations th {
    display: block;
    width: 100% !important;
    padding: 0 0 8px 0 !important;
  }

  /* Add to cart button — full width, prominent */
  .single-product .single_add_to_cart_button {
    width:           100% !important;
    min-height:      52px !important;
    font-size:       1rem !important;
    border-radius:   14px !important;
  }

  /* Trust badges — stack to 1 per row on very narrow */
  .pq-single-promise {
    gap: 6px !important;
  }
  .pq-single-promise__item {
    flex:    1 1 100% !important; /* full width on mobile */
    padding: 10px 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT PROMISE SECTION — compact flex strip
   ══════════════════════════════════════════════════════════════ */
.pq-product-after { display: none !important; }

.pq-single-promise {
  display:   flex    !important;
  flex-wrap: wrap;
  gap:       8px;
  margin:    14px 0 0;
}

.pq-single-promise__item {
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex:          1 1 calc(50% - 4px);
  min-width:     0;
  padding:       9px 11px;
  border:        1px solid var(--pq-border);
  border-radius: 12px;
  background:    #fafbfa;
}

.pq-single-promise__icon {
  width:         30px;
  height:        30px;
  border-radius: 8px;
  display:       grid;
  place-items:   center;
  background:    var(--pq-sand);
  color:         var(--pq-green);
  flex-shrink:   0;
}
.pq-single-promise__icon svg { width: 16px; height: 16px; }

.pq-single-promise__item div { min-width: 0; }
.pq-single-promise__item strong {
  display:       block;
  font-size:     .78rem;
  font-weight:   800;
  color:         var(--pq-ink);
  line-height:   1.25;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.pq-single-promise__item p { display: none; }

/* ══════════════════════════════════════════════════════════════
   FOOTER PATCHES
   ══════════════════════════════════════════════════════════════ */
.pq-product-after__icon {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--pq-sand); color: var(--pq-green); flex-shrink: 0;
}

.pq-footer__trust-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; background: var(--pq-sand); color: var(--pq-green);
}
.pq-footer__trust-icon svg { width: 22px; height: 22px; }

.pq-footer__trust-item { display: flex; align-items: center; gap: 14px; }
.pq-footer__trust-item > div { display: flex; flex-direction: column; gap: 2px; }
.pq-footer__trust-item strong { font-size: .92rem; font-weight: 800; color: var(--pq-ink); }
.pq-footer__trust-item span   { font-size: .8rem;  color: var(--pq-muted); }

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

.pq-newsletter button svg { width: 16px; height: 16px; }