/*
 * Papiyon archive accessibility proposal v2 — 2026-09-15
 * Draft only. Integrate after theme/Elementor CSS and verify in the browser.
 * Scope: DigiLand block-archive-product widget. Home .papiyon-products and
 * general-product-list/carousel widgets are deliberately excluded.
 * No data attributes, handlers, product links, fonts, or colours are changed.
 * Evidence: audit/A11Y-CSS-FINDINGS.md.
 */

/* A11Y-CSS-00: retain the existing Bootstrap column geometry after DIV -> LI.
   Preserve native responsive column padding (desktop measured 0 9.6px).
   Do not zero padding, or reuse WooCommerce's percentage card margins.
   These class-qualified widths match the observed col-6/col-sm-6/col-lg-4.
   Other column variants and the home four-column grid are not targeted. */
body.woocommerce .elementor-widget-block-archive-product ul.products.row > li.item.product {
  display: block;
  float: none;
  clear: none;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  flex: 0 0 auto;
}

body.woocommerce .elementor-widget-block-archive-product ul.products.row > li.item.product.col-6 {
  width: 50%;
  max-width: 50%;
}

@media (min-width: 992px) {
  body.woocommerce .elementor-widget-block-archive-product ul.products.row > li.item.product.col-lg-4 {
    width: 33.3333333333%;
    max-width: 33.3333333333%;
  }
}

/* A11Y-CSS-01: actual title link >=44px, with an 8px image/title gap.
   Release the theme's 42px clipping; retain inherited font and alignment.
   Class selectors survive H3 -> H2 without broad heading overrides. */
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area > .product-name {
  display: block;
  height: auto;
  min-height: 44px;
  max-height: none;
  margin-top: 8px;
  margin-bottom: 10px;
  padding: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  text-overflow: clip;
}

body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area > .product-name > a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding-block: 6px;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: break-word;
}

/* A11Y-CSS-02: stable hitboxes in rest, hover and focus states.
   The native elm_pg_7 effect shifts IMG/title -45px but leaves the image
   anchor behind, producing overlap. Disable only that vertical effect.
   The action row now occupies natural height beneath the existing price.
   Card/image dimensions, native background colours and CTA styling remain. */
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7 .product-image-area img,
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7 > .product-name,
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7 > .price,
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7 .prd_term_list,
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7 .product-features {
  transform: none;
}

body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7 > .actions,
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7:hover > .actions,
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7:focus-within > .actions {
  position: static;
  inset: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 47px;
  height: auto;
  margin-top: 10px;
  padding: 0 12px 0 5px;
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* Preserve native AJAX's .added hiding. Let the original cart/wishlist row
   wrap on narrow cards rather than overlap. No full-width card/grid reset. */
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7 > .actions > .add-to-cart-wrap {
  flex: 1 1 110px;
  min-width: 0;
  max-width: 100%;
}

body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.elm_pg_7 > .actions > .add-to-cart-wrap > a:not(.added) {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: auto;
  max-width: 100%;
  padding-block: 6px;
  line-height: 1.5;
  white-space: normal;
  text-align: center;
  overflow-wrap: break-word;
}

/* A11Y-CSS-03: wishlist link and its containing list item grow together.
   Parent list can wrap on mobile, retaining the original icon colour/state. */
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area .actions > .add-to-links {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area .actions > .add-to-links > li {
  min-width: 44px;
  min-height: 44px;
}

body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area .actions .add_to_wishlist_wrap > a.add_to_wishlist {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  line-height: 1;
}

/* A11Y-CSS-04: inset focus ring stays visible within the native clipped card. */
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area > .product-name > a:focus-visible,
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area > .product-image-area > a.product-image:focus-visible,
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area .actions a:focus-visible {
  outline: 3px solid #aa7800;
  outline-offset: -3px;
}

/* CSS does not repair accessible names, viewport zoom, landmarks, ARIA,
   heading levels or list semantics. Root's separate native HTML corrections
   retain all classes/data/handlers. No generated content substitutes for names.
   No descendant functional-pseudo syntax is used (DigiLand minifier safety). */

/* A11Y-CSS-05: native Android/general_mobile cards use a nested detail area.
   Keep the existing 2-column/photo/price/action layout. Only enlarge the actual
   title and cart targets; the action LI already reserves a 44px slot. */
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.general_mobile > .product-detail-area > .product-name {
  display: block;
  height: auto;
  min-height: 44px;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  text-overflow: clip;
}

body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.general_mobile > .product-detail-area > .product-name > a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding-block: 2px;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: break-word;
}

body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.general_mobile > .product-detail-area > .actions > .add-to-links > li > .add-to-cart-wrap > a:not(.added) {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  line-height: 1;
}

body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.general_mobile > .product-detail-area > .product-name > a:focus-visible,
body.woocommerce .elementor-widget-block-archive-product .products > .item > .item-area.general_mobile > .product-detail-area > .actions > .add-to-links > li > .add-to-cart-wrap > a:focus-visible {
  outline: 3px solid #aa7800;
  outline-offset: -3px;
}

/* A11Y-CSS-06: keep the focused skip link visible above the fixed header.
   Unfocused hiding remains unchanged; account for WordPress's admin bar. */
.papiyon-home .pp-skip:focus {
  position: fixed;
  top: calc(10px + var(--wp-admin--admin-bar--height, 0px));
  z-index: 100000;
}