/* =============================================================
   fixes-and-upgrades.css  — PawQuest single source of truth
   Loaded LAST. Owns: product gallery, product loop cards,
   popular-products rail, scroll lock, hero, shipping bar,
   focus styles, footer patches.
   NO conflicts — every rule here is the final word.
   ============================================================= */

/* ══════════════════════════════════════════════════════════════
   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;
}

/* ══════════════════════════════════════════════════════════════
   HERO — contrast + dot tap targets
   ══════════════════════════════════════════════════════════════ */
.pq-hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg,
    rgba(10,24,16,.60) 0%,
    rgba(10,24,16,.32) 46%,
    transparent 72%);
  pointer-events: none;
}
.pq-hero__panel { position: relative; z-index: 2; }

.pq-hero-slider__dot {
  width: 9px; height: 9px; /* actual dot — hero.css owns these */
  /* override with larger touch target via padding */
  padding: 14px;
  box-sizing: content-box;
  background-clip: content-box;
  border: none;
  background-color: rgba(255,255,255,.7);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.pq-hero-slider__dot.is-active {
  width: 28px;
  background-color: var(--pq-green);
}

/* Ghost CTA on hero */
.pq-btn--ghost {
  background:      rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  border:          1.5px solid rgba(255,255,255,.65);
  color:           #fff;
}
.pq-btn--ghost:hover {
  background:   rgba(255,255,255,.32);
  border-color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   CATEGORY GRID — placeholder paw instead of blank mint box
   ══════════════════════════════════════════════════════════════ */
.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 — balanced when < 3 bundles exist
   ══════════════════════════════════════════════════════════════ */
.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;
}

/* ══════════════════════════════════════════════════════════════
   FREE SHIPPING BAR
   ══════════════════════════════════════════════════════════════ */
.pq-shipping-bar {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #f1f7f2;
  border-radius: 14px;
}
.pq-shipping-bar__msg {
  display: block;
  font-size: .8rem;
  font-weight: 800;
  color: var(--pq-green);
  margin-bottom: 8px;
}
.pq-shipping-bar__track {
  height: 6px;
  border-radius: 999px;
  background: var(--pq-border);
  overflow: hidden;
}
.pq-shipping-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--pq-green);
  transition: width .4s ease;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT LOOP CARDS
   Single authoritative block. Overrides everything above.
   Applied to: shop archive, related products, popular rail.
   ══════════════════════════════════════════════════════════════ */

/* Container reset */
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

/* Card shell */
.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,.13);
  border-radius:  22px;
  background:     #fff;
  box-shadow:     0 10px 30px rgba(17,34,25,.06);
  transition:     transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.woocommerce ul.products li.product:hover {
  transform:    translateY(-4px);
  box-shadow:   0 20px 46px rgba(17,34,25,.11);
  border-color: rgba(36,61,44,.24);
}

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

/* Product image */
.woocommerce ul.products li.product img {
  display:      block    !important;
  width:        100%     !important;
  height:       200px    !important;
  object-fit:   contain  !important;
  background:   linear-gradient(180deg,#f8fbf8,#eef5ef);
  border-radius: 20px 20px 0 0;
  padding:      14px;
  margin:       0        !important;
  transition:   transform .25s ease;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.035);
}

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

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

/* Trust badges */
.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:    #f6faf6;
  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;
  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); }
}

/* ATC button */
.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;
}

/* ── Archive grid responsive ────────────────────────────────── */
/* Default grid used on /shop/ and category pages */
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(5, minmax(0,1fr)) !important;
  gap:                   20px !important;
}
@media (max-width: 1450px) {
  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(4, minmax(0,1fr)) !important;
  }
}
@media (max-width: 1100px) {
  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: 420px) {
  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:        14px;
  /* clip the scrollbar track to rail height */
  scrollbar-width: thin;
  scrollbar-color: var(--pq-border) transparent;
}

/* Desktop: 4-column grid, no scroll */
@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;
    /* kill any flex/flex-wrap that could break this */
    flex-wrap:   unset !important;
    min-width:   unset !important;
  }
  .pq-popular-products__rail ul.products li.product {
    flex: none !important;
    min-width: 0 !important;
  }
}

/* Mobile/tablet: horizontal snap-scroll strip */
@media (max-width: 980px) {
  .pq-popular-products__rail ul.products {
    display:   flex     !important;
    flex-wrap: nowrap   !important;
    gap:       14px     !important;
    width:     max-content !important;
    min-width: unset    !important;
  }
  .pq-popular-products__rail ul.products li.product {
    flex:      0 0 min(74vw, 290px) !important;
    width:     min(74vw, 290px)     !important;
    min-width: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT GALLERY — one authoritative block
   Desktop: left thumbnail column (96px) + main image
   Mobile:  main image on top, thumbnail scroll strip below
   ══════════════════════════════════════════════════════════════ */

/* The shell that wraps gallery + summary */
.single-product .pq-single-shell {
  display:               grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr);
  gap:                   clamp(24px,4vw,52px);
  align-items:           start;
  padding:               clamp(14px,2.4vw,28px);
}

/* Summary sticky on desktop */
@media (min-width: 761px) {
  .single-product .pq-single-shell .summary {
    position: sticky;
    top:      108px;
    align-self: start;
  }
}

/* ── Gallery wrapper ── */
.single-product .woocommerce-product-gallery {
  border:        1px solid var(--pq-border);
  border-radius: 20px;
  background:    #fff;
  padding:       clamp(12px,1.8vw,20px);
  box-shadow:    var(--pq-shadow);
  /* 2-column grid: thumbnails left, main right */
  display:               grid !important;
  grid-template-columns: 96px minmax(0,1fr) !important;
  gap:                   14px !important;
  align-items:           start !important;
}

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

/* ── Main image viewport (right column) ── */
.single-product .woocommerce-product-gallery__wrapper {
  grid-column: 2 !important;
  grid-row:    1 !important;
  display:     block !important;
  width:       100%  !important;
  min-width:   0;
}
.single-product .flex-viewport {
  display:  block   !important;
  width:    100%    !important;
  overflow: hidden  !important;
}
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image a > img,
.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;
  background:   #f7f8f5;
  border-radius: 14px;
  opacity:      1         !important;
  visibility:   visible   !important;
}

/* ── Thumbnail strip (left column) ── */
.single-product .flex-control-thumbs {
  grid-column:    1            !important;
  grid-row:       1            !important;
  display:        flex         !important;
  flex-direction: column       !important;
  gap:            10px         !important;
  list-style:     none         !important;
  margin:         0            !important;
  padding:        0            !important;
  max-height:     580px        !important;
  overflow-y:     auto         !important;
  overflow-x:     hidden       !important;
  scrollbar-width: thin;
}
.single-product .flex-control-thumbs li {
  width:         100%  !important;
  float:         none  !important;
  flex:          0 0 auto;
  display:       block !important;
  border:        1px solid var(--pq-border);
  border-radius: 12px;
  overflow:      hidden;
  background:    #fff;
  cursor:        pointer;
}
.single-product .flex-control-thumbs img {
  display:      block   !important;
  width:        100%    !important;
  height:       auto    !important;
  aspect-ratio: 1 / 1   !important;
  object-fit:   cover   !important;
  opacity:      .65     !important;
  visibility:   visible !important;
  transition:   opacity .18s ease;
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover {
  opacity: 1 !important;
}

/* ── Mobile gallery — stack vertically ── */
@media (max-width: 760px) {
  /* Shell: single column */
  .single-product .pq-single-shell {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 12px !important;
  }

  /* Gallery: single column, thumbnails below */
  .single-product .woocommerce-product-gallery {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  /* Main image — row 1 */
  .single-product .woocommerce-product-gallery__wrapper {
    grid-column: 1 !important;
    grid-row:    1 !important;
    width:       100% !important;
  }
  .single-product .flex-viewport {
    width:    100%   !important;
    overflow: hidden !important;
  }
  .single-product .woocommerce-product-gallery__image img,
  .single-product .woocommerce-product-gallery__image a > img,
  .single-product .wp-post-image {
    max-height:   420px !important;
  }

  /* Thumbnails — row 2, horizontal scroll */
  .single-product .flex-control-thumbs {
    grid-column:    1        !important;
    grid-row:       2        !important;
    flex-direction: row      !important;
    max-height:     none     !important;
    overflow-x:     auto     !important;
    overflow-y:     hidden   !important;
    padding:        2px 0 6px !important;
    -webkit-overflow-scrolling: touch;
  }
  .single-product .flex-control-thumbs li {
    flex:      0 0 72px !important;
    width:     72px     !important;
    min-width: 72px     !important;
  }
  .single-product .flex-control-thumbs img {
    width:  72px !important;
    height: 72px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT — trust icons (SVG, not emoji)
   ══════════════════════════════════════════════════════════════ */
.pq-single-promise__icon,
.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-product-after {
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 760px) {
  .pq-product-after { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER PATCHES
   ══════════════════════════════════════════════════════════════ */
/* Social links visible until real URLs connected */
.pq-footer__social a {
  font-size:      .7rem;
  font-weight:    800;
  letter-spacing: .04em;
}