/* Shop archive chrome */
.chroma-shop { padding: 48px 0 64px; }
.woocommerce .woocommerce-products-header__title, .woocommerce h1.page-title {
  font-family: var(--chroma-font-head); font-weight: 900; letter-spacing: 1px;
  text-align: center; color: var(--chroma-ink); font-size: clamp(48px, 7vw, 100px); margin: 0 0 32px;
}
.chroma-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.woocommerce .woocommerce-result-count { font-family: var(--chroma-font-body); color: var(--chroma-body-text); margin: 0; }
.woocommerce .woocommerce-ordering select {
  font-family: var(--chroma-font-body); padding: 8px 36px 8px 12px; border: 1px solid #c9c9bf; border-radius: 3px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23241612' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none; -webkit-appearance: none;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce .button {
  background: var(--chroma-red); color: #fff; border-radius: 3px; font-family: var(--chroma-font-body);
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--chroma-red-dark); }

/* Cart / checkout / account are block pages that render via page.php's flush
   branch (no .chroma-container), so they'd hit the viewport edges. Constrain
   them to the site width with side gutters and some vertical breathing room. */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-account .woocommerce {
  max-width: var(--chroma-content-max);
  margin-inline: auto;
  padding: 48px var(--chroma-gutter) 64px;
  box-sizing: border-box;
}