/**
 * Transform Pilot Design System — Archive / Product-tile styling.
 *
 * Works WITH the Elementor template 10325 card structure:
 *   eyebrow → image → title → description → format → CTA
 *
 * Scopes to body.post-type-archive-product. Never alters
 * WooCommerce core, The7 parent, cart/checkout, or product data.
 *
 * Design tokens: navy #03162C, teal #1F7A8C, cyan #35C2DA,
 *   bg-light #F4F7FA, border #DDE5EC, text #07172D, radius 4px.
 *
 * @package TransformPilot\Site
 */

/* ========================================================================
   1. ARCHIVE WRAPPER — 1300px design-system container
   ======================================================================== */

body.post-type-archive-product [data-elementor-type="product-archive"] {
  max-width: 100%;
}

body.post-type-archive-product .elementor-element-1a6b148 {
  max-width: calc(1300px + 80px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* ========================================================================
   2. DUPLICATE H1 — tp-ds-woo.php demotes template H1 to div
   ======================================================================== */

body.post-type-archive-product [data-elementor-type="product-archive"] h1.the7-heading-title {
  display: none !important;
}

/* ========================================================================
   3. PRODUCT GRID
   ======================================================================== */

body.post-type-archive-product ul.products {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Desktop: 3 columns */
@media (min-width: 1025px) {
  body.post-type-archive-product ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1024px) {
  body.post-type-archive-product ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  body.post-type-archive-product ul.products {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body.post-type-archive-product .elementor-element-1a6b148 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ========================================================================
   4. PRODUCT CARD — hover lift only
   ======================================================================== */

body.post-type-archive-product ul.products li.product {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

body.post-type-archive-product ul.products li.product:hover {
  box-shadow: 0 4px 16px rgba(3, 22, 44, 0.08);
  transform: translateY(-1px);
}

/* ========================================================================
   5. CARD IMAGE — consistent ratio, cover, no distortion
   ======================================================================== */

body.post-type-archive-product ul.products li.product img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ========================================================================
   6. CARD CTA BUTTON — hover transition
   ======================================================================== */

body.post-type-archive-product ul.products li.product .elementor-button {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.post-type-archive-product ul.products li.product .elementor-button:hover {
  background-color: #1F7A8C !important;
  color: #fff !important;
  border-color: #1F7A8C !important;
}

body.post-type-archive-product ul.products li.product .elementor-button:focus-visible {
  outline: 3px solid #35C2DA;
  outline-offset: 3px;
}

/* ========================================================================
   7. HIDE LEGACY THE7 CRUFT (sale badges, ratings, etc.)
   ======================================================================== */

body.post-type-archive-product ul.products .onsale,
body.post-type-archive-product ul.products .star-rating,
body.post-type-archive-product .elementor-element-8e28703 {
  display: none !important;
}

/* ========================================================================
   8. PAGINATION
   ======================================================================== */

body.post-type-archive-product .woocommerce-pagination {
  margin-top: 40px;
  text-align: center;
}

body.post-type-archive-product .woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.post-type-archive-product .woocommerce-pagination ul.page-numbers li .page-numbers {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #07172D;
  background: #fff;
  border: 1px solid #DDE5EC;
  border-radius: 4px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

body.post-type-archive-product .woocommerce-pagination ul.page-numbers li .page-numbers.current {
  background: #1F7A8C;
  color: #fff;
  border-color: #1F7A8C;
}

body.post-type-archive-product .woocommerce-pagination ul.page-numbers li .page-numbers:hover:not(.current) {
  background: #F4F7FA;
  border-color: #1F7A8C;
}

/* ========================================================================
   9. RESPONSIVE — tablet (≤1024px)
   ======================================================================== */

@media (max-width: 1024px) {
  body.post-type-archive-product .elementor-element-1a6b148 {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ========================================================================
   10. REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.post-type-archive-product ul.products li.product,
  body.post-type-archive-product ul.products li.product .elementor-button {
    transition: none !important;
  }
}