/*
 * Shop / category archive — formulary ledger-row grid, echoing the
 * price-list rows of the approved "open book" reference material.
 */

.rn-shop-intro {
  background: var(--rn-cream);
  padding-block: var(--rn-space-lg) var(--rn-space-md);
}

ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--rn-space-md) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

li.rn-product-card {
  /*
   * WooCommerce's own woocommerce-layout.css sets `li.product` to
   * width:22.05%; float:left (its float-based grid fallback). Since
   * every card keeps WooCommerce's default "product" class alongside
   * "rn-product-card" (wc_product_class() adds both), that rule still
   * applies inside our CSS grid container: floats are ignored by grid
   * layout, but the percentage width is not, which is what produced
   * the narrow vertical "ribbon" cards. Reset both explicitly.
   */
  /*
   * No card chrome. The bordered, shadowed, cream-filled box around
   * every product was doing the work the product photo should do, and
   * a grid of identical bordered boxes is what made the catalogue read
   * as a 2010-era shop. The image now sits directly on the page
   * ground; hierarchy comes from the photo, then title, then price.
   */
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.rn-product-card__frame {
  position: relative;
  overflow: hidden;
  background: var(--rn-cream-deep);
  /* Matches the image ratio below, so the frame can't leave a strip of
     its own background showing under a shorter image. */
  aspect-ratio: 4 / 5;
}

/* WooCommerce wraps the thumbnail in its own <a>; make that wrapper
   fill the frame so the image has a full-height box to cover. */
.rn-product-card__frame > a {
  display: block;
  height: 100%;
}

/* The ledger number reads as a mark stamped on the image corner, with
   no plate behind it, instead of a brass chip floating over the photo. */
.rn-product-card__frame .rn-ledger-tag {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 2;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  color: var(--rn-cream);
  mix-blend-mode: difference;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

li.rn-product-card img {
  width: 100%;
  height: 100%;
  /* 4:5 portrait: gives an object photographed upright more height to
     occupy than the old 4:3 landscape crop, which cropped tall
     ornaments awkwardly. */
  object-fit: cover;
  border: 0;
  transition: transform var(--rn-dur-slow) var(--rn-ease);
}

li.rn-product-card:hover img,
li.rn-product-card:focus-within img {
  transform: scale(1.035);
}

li.rn-product-card .woocommerce-loop-product__title {
  font-family: var(--rn-font-display);
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--rn-green-900);
  margin: 0.15rem 0 0;
}

li.rn-product-card .price {
  font-family: var(--rn-font-display);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--rn-ink-soft);
}

/*
 * Add-to-cart as a text action with an underline that draws in on
 * hover, not an outlined pill. The pill competed with the product
 * photo for attention in every cell of the grid.
 */
li.rn-product-card .button {
  align-self: flex-start;
  margin-top: 0.1rem;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--rn-bordeaux-700);
  font-family: var(--rn-font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  position: relative;
}

li.rn-product-card .button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rn-dur) var(--rn-ease);
}

li.rn-product-card .button:hover::after,
li.rn-product-card .button:focus-visible::after {
  transform: scaleX(1);
}

li.rn-product-card .button:hover,
li.rn-product-card .button:focus-visible {
  background: none;
  color: var(--rn-bordeaux-600);
}

li.rn-product-card .added_to_cart {
  font-family: var(--rn-font-label);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rn-green-700);
}

.woocommerce-result-count,
.woocommerce-ordering {
  font-family: var(--rn-font-label);
  font-size: 0.82rem;
}

@media (max-width: 1100px) {
  ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 780px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  ul.products {
    grid-template-columns: 1fr !important;
  }
}

/*
 * Archive header + sorting bar.
 *
 * Storefront ships this as a raw OS <select> next to a plain sentence,
 * stacked with wide default gaps — the single most "unfinished CMS"
 * looking element on the catalogue pages. Here it becomes one hairline
 * row: title above, then a rule, then sorting on the left and the
 * result count right-aligned on the same baseline.
 */
.woocommerce-products-header {
  padding-top: var(--rn-space-lg);
}

.storefront-sorting {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rn-space-md);
  flex-wrap: wrap;
  border-top: 1px solid var(--rn-paper-line);
  padding-top: 0.85rem;
  margin-bottom: var(--rn-space-lg);
}

.storefront-sorting .woocommerce-result-count {
  order: 2;
  margin: 0;
  color: var(--rn-ink-soft);
  font-variant-numeric: tabular-nums;
}

.storefront-sorting .woocommerce-ordering {
  order: 1;
  margin: 0;
}

.rn-formulary .woocommerce-ordering select {
  /*
   * Custom chevron via background-image so the control matches the
   * palette instead of rendering the platform's own dropdown arrow.
   */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-bottom: 1px solid var(--rn-gold-500);
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238a7752' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.15rem center;
  background-size: 11px 7px;
  padding: 0.35rem 1.6rem 0.35rem 0;
  font-family: var(--rn-font-label);
  font-size: 0.78rem;
  color: var(--rn-green-900);
  cursor: pointer;
  transition: border-color var(--rn-dur-fast) var(--rn-ease);
}

.rn-formulary .woocommerce-ordering select:hover,
.rn-formulary .woocommerce-ordering select:focus {
  border-bottom-color: var(--rn-bordeaux-600);
}

/* Pagination, restyled from Storefront's boxed grey buttons. */
.rn-formulary .woocommerce-pagination {
  border: 0;
  border-top: 1px solid var(--rn-paper-line);
  padding-top: var(--rn-space-md);
  margin-top: var(--rn-space-xl);
}

.rn-formulary .woocommerce-pagination .page-numbers li .page-numbers {
  background: none;
  color: var(--rn-ink-soft);
  font-family: var(--rn-font-label);
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border: 0;
  font-variant-numeric: tabular-nums;
}

.rn-formulary .woocommerce-pagination .page-numbers li .page-numbers.current {
  background: none;
  color: var(--rn-bordeaux-700);
  font-weight: 600;
  box-shadow: inset 0 -1px 0 var(--rn-bordeaux-600);
}