/* =============================================================================
   PP v2 — Shop / category / tag archive (woocommerce/archive-product.php)
   — Phase 4 / Task 4.1
   -----------------------------------------------------------------------------
   Emitted as a raw <link> at wp_head:1004 (after design-system @1001,
   header-footer @1002, home @1003), archive pages only
   (is_shop / is_product_category / is_product_tag). EVERY rule is scoped under
   body.pp-theme-v2 so the sheet is inert on any other theme/context.

   The SHARED product-card rules (.ppv2-pcard*) live in pp-v2-design-system.css
   (site-wide). This sheet owns: the light page header, the archive grid
   (.ppv2-shop-grid: 2 / 3 / 4 cols), the sort-bar (result-count + WC ordering),
   and light pagination — plus the overrides that neutralise the legacy dark
   WooCommerce loop styling so our floating cards sit on the light background.

   Tokens from pp-v2-design-system.css (--pp-navy, --pp-blue, --pp-gold-text,
   --pp-slate, --pp-line, --ppv2-* radii/shadows). Never use --pp-gold for text
   on white (fails AA) — use --pp-gold-text.

   Breakpoints: mobile-first base, then 768 (tablet) / 1024 (desktop).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. Archive content frame. The shop keeps the existing #pp-shop-sidebar
   layout (pp-shop-sidebar.css grids .site-content into [230px | 1fr] and puts
   the WC content in .content-area). We don't fight that — we only relax the
   inner GP article box padding so the grid breathes, and give the archive a
   light surface. .woocommerce-archive-wrapper is GP's archive content wrapper.
   --------------------------------------------------------------------------- */

body.pp-theme-v2.woocommerce-shop .inside-article,
body.pp-theme-v2.tax-product_cat .inside-article,
body.pp-theme-v2.tax-product_tag .inside-article {
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.pp-theme-v2 .woocommerce-archive-wrapper {
  background: transparent;
}

/* GP's #wc-column-container wraps the sort-bar + our grid; let it be a plain
   block so our grid owns its own columns. */
body.pp-theme-v2 #wc-column-container {
  display: block;
}

/* ---------------------------------------------------------------------------
   1. LIGHT PAGE HEADER — title + RUO subtitle
   --------------------------------------------------------------------------- */

body.pp-theme-v2 .ppv2-shop-head {
  margin: 4px 0 22px;
  padding: 0;
}

body.pp-theme-v2 .ppv2-shop-head .ppv2-eyebrow {
  margin-bottom: 6px;
}

body.pp-theme-v2 .ppv2-shop-head__title {
  font-family: var(--ppv2-font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--pp-navy);
  margin: 0 0 10px;
}

body.pp-theme-v2 .ppv2-shop-head__sub {
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  line-height: 1.55;
  color: var(--pp-slate);
  max-width: 64ch;
  margin: 0;
}

body.pp-theme-v2 .ppv2-shop-head__term-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pp-slate);
  max-width: 64ch;
  margin: 12px 0 0;
}
body.pp-theme-v2 .ppv2-shop-head__term-desc p {
  margin: 0 0 8px;
}

/* RUO note — high-contrast amber, never gold-on-white */
body.pp-theme-v2 .ppv2-shop-head__ruo {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: #fffaf0;
  border: 1px solid #fde68a;
  border-radius: var(--ppv2-radius);
  font-size: 12.5px;
  line-height: 1.5;
  color: #5b4a16;       /* dark amber — passes AA on #fffaf0 */
  max-width: 80ch;
}

/* ---------------------------------------------------------------------------
   2. SORT BAR — result count (left) + WooCommerce ordering dropdown (right)
   Both are emitted by woocommerce_before_shop_loop hooks. We restyle them as a
   light flex row sitting above the grid. Override WC's legacy float layout.
   --------------------------------------------------------------------------- */

body.pp-theme-v2 .woocommerce .woocommerce-result-count,
body.pp-theme-v2 .woocommerce-page .woocommerce-result-count {
  float: none !important;
  margin: 0 0 16px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-navy);
  line-height: 44px;          /* vertically align with the 44px select */
}

body.pp-theme-v2 .woocommerce .woocommerce-ordering,
body.pp-theme-v2 .woocommerce-page .woocommerce-ordering {
  float: none !important;
  margin: 0 0 18px;
}

body.pp-theme-v2 .woocommerce-ordering select.orderby,
body.pp-theme-v2 .woocommerce-ordering .orderby {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 44px;            /* touch target */
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--pp-line);
  border-radius: var(--ppv2-radius);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font-family: var(--ppv2-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-navy);
  cursor: pointer;
  line-height: 1.2;
  transition: border-color var(--ppv2-ease), box-shadow var(--ppv2-ease);
}
body.pp-theme-v2 .woocommerce-ordering select.orderby:hover {
  border-color: var(--pp-blue);
}
body.pp-theme-v2 .woocommerce-ordering select.orderby:focus-visible {
  outline: none;
  border-color: var(--pp-blue);
  box-shadow: 0 0 0 3px rgba(0, 61, 130, 0.18);
}
/* Kill WooCommerce's legacy icon-font dropdown arrow (WooCommerce font, glyph
   \e00f) on the ordering select — the theme already draws a clean SVG chevron
   above, so the WC glyph just overlaps it as a "weird" second arrow. */
body.pp-theme-v2 .woocommerce-ordering::after,
body.pp-theme-v2 .woocommerce-ordering::before {
  content: none !important;
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.pp-theme-v2 .woocommerce-ordering select.orderby {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   3. PRODUCT GRID — .ppv2-shop-grid: 2 (mobile) / 3 (tablet) / 4 (desktop)
   Floating cards on the light background. Card visuals come from
   pp-v2-design-system.css (.ppv2-pcard*) + .ppv2-card primitive.
   --------------------------------------------------------------------------- */

body.pp-theme-v2 .ppv2-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2 across (matches mockup) */
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  clear: both;
}

/* Stretch each card to fill its grid cell so feet (price/CTA) align across a row. */
body.pp-theme-v2 .ppv2-shop-grid > .ppv2-pcard {
  height: 100%;
}

/* ---------------------------------------------------------------------------
   4. PAGINATION — light. Rendered by woocommerce_pagination() on
   woocommerce_after_shop_loop (only when there is more than one page).
   --------------------------------------------------------------------------- */

body.pp-theme-v2 .woocommerce nav.woocommerce-pagination,
body.pp-theme-v2 .woocommerce-page nav.woocommerce-pagination {
  margin: 34px 0 8px;
  text-align: center;
  border: 0;
}

body.pp-theme-v2 .woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  border: 0;
  margin: 0;
  padding: 0;
}

body.pp-theme-v2 .woocommerce-pagination ul.page-numbers li {
  border: 0;
  margin: 0;
}

body.pp-theme-v2 .woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;            /* touch target */
  padding: 0 12px;
  border: 1px solid var(--pp-line);
  border-radius: var(--ppv2-radius);
  background: #ffffff;
  color: var(--pp-navy);
  font-family: var(--ppv2-font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--ppv2-ease), color var(--ppv2-ease), border-color var(--ppv2-ease);
}

body.pp-theme-v2 .woocommerce-pagination a.page-numbers:hover {
  background: var(--pp-blue);
  border-color: var(--pp-blue);
  color: #ffffff;
}

body.pp-theme-v2 .woocommerce-pagination .page-numbers.current {
  background: var(--pp-navy);
  border-color: var(--pp-navy);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  body.pp-theme-v2 .woocommerce-pagination .page-numbers {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   5. "No products found" — keep it readable on the light surface.
   --------------------------------------------------------------------------- */

body.pp-theme-v2 .woocommerce-info,
body.pp-theme-v2 .woocommerce-no-products-found .woocommerce-info {
  background: #f6f9fd;
  border-top: 3px solid var(--pp-blue);
  color: var(--pp-navy);
}

/* ---------------------------------------------------------------------------
   BREAKPOINT: 768px (tablet) — 3 columns
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  body.pp-theme-v2 .ppv2-shop-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  body.pp-theme-v2 .ppv2-shop-head {
    margin-bottom: 26px;
  }
}

/* ---------------------------------------------------------------------------
   BREAKPOINT: 1024px (desktop) — 4 columns
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  body.pp-theme-v2 .ppv2-shop-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
}
/* Shop header sizing (2026-06-25, owner): the mobile treatment — small one-line title +
   larger gold eyebrow — now applied at ALL widths (owner: "make desktop the same size as
   mobile, I liked how mobile turned out"). Was @media (max-width:767.98px) only.
   high-specificity (html body.pp-theme-v2 …) beats the base clamp(1.6rem,4vw,2.4rem) title +
   11px eyebrow. Mirrored into inc/critical-css/shop.css so first paint is already the small
   size (no big->small flash on load). */
html body.pp-theme-v2 .ppv2-shop-head__title{font-size:clamp(11px,3.75vw,16px);white-space:nowrap;letter-spacing:-0.02em;line-height:1.2;margin-bottom:6px}
html body.pp-theme-v2 .ppv2-shop-head .ppv2-eyebrow{font-size:28px;letter-spacing:0.05em;line-height:1.1;margin-bottom:8px}
html body.pp-theme-v2 .ppv2-shop-head__sub{margin-bottom:10px}