/* ==========================================================================
   WooCommerce — the markup that survives the adapter

   Loaded only when WooCommerce is active, and only after the theme stylesheet.

   The adapter dequeue's WooCommerce's own `woocommerce-general`, `-layout` and
   `-smallscreen` stylesheets, because the theme draws its own product pages and
   Woo's typography fights the theme's everywhere else. That leaves the
   shortcode and block styles with nothing to sit on, so the rules that would
   have come from those three files are re-stated here in the theme's tokens.

   Scope: everything is under `.woocommerce` or `.wc-block-*`. Nothing here can
   reach the theme's own product cards, which never render inside a WooCommerce
   wrapper — the two systems style separate markup and meet only at the tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Surfaces and type
   -------------------------------------------------------------------------- */

.woocommerce,
.wp-block-woocommerce-product-collection,
.wp-block-woocommerce-all-products {
  color: var(--ink);
  font-family: var(--body);
}

.woocommerce h2,
.woocommerce h3 {
  font-family: var(--brand);
  font-weight: 400;
  letter-spacing: -.01em;
}

.woocommerce a:not(.button):not(.btn) {
  color: var(--pink-text);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-size: .84rem;
  color: var(--ink-3);
}

.woocommerce .woocommerce-ordering select {
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--ink);
  padding: 9px 32px 9px 12px;
}

/* --------------------------------------------------------------------------
   Buttons — WooCommerce's `.button` becomes the theme's `.btn`

   WooCommerce prints `class="button"` from a dozen templates. Rather than edit
   each one, `.button` is aliased onto the theme's primary button so a product
   table, a coupon form and a checkout all look like the rest of the site.
   -------------------------------------------------------------------------- */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pink-btn);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--ink);
  color: var(--ink-inv);
}

.woocommerce .button.alt {
  background: var(--ink);
  color: var(--ink-inv);
}

.woocommerce .button.alt:hover { background: var(--pink-btn); color: #fff; }

/*
 * The "Ask about this" replacement the adapter drops into every loop. It is an
 * anchor, not a button, so it needs to stop inheriting WooCommerce's link
 * colour — otherwise it reads as body text sitting on a card.
 */
.woocommerce a.button.btn-ghost {
  background: transparent;
  color: var(--pink-text);
  border: 1.5px solid var(--line);
}

.woocommerce a.button.btn-ghost:hover {
  background: var(--pink-soft);
  color: var(--pink-text);
  border-color: var(--pink);
}

/* --------------------------------------------------------------------------
   Product loop — shortcodes and blocks

   The theme's own archive uses .grid-cats and never reaches these rules. They
   are for [products] and the product blocks, which a desk may drop into a
   Journal post.
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products li.product {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 0 0 18px;
  margin: 0;
  text-align: left;
}

.woocommerce ul.products li.product a img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 14px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--mist);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--brand);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.25;
  padding: 0 16px;
  margin: 0 0 6px;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating {
  padding: 0 16px;
  color: var(--ink-2);
  font-size: .9rem;
}

.woocommerce ul.products li.product .button {
  margin: 12px 16px 0;
}

/* --------------------------------------------------------------------------
   Star ratings

   WooCommerce draws these from an icon font with a gold colour baked in. The
   theme has no gold — the palette is a single pink family — so the rating is
   repainted onto pink rather than left as the only warm-yellow thing on the
   page. `currentColor` on the ::before glyph is what makes that work.
   -------------------------------------------------------------------------- */

.woocommerce .star-rating {
  color: var(--pink-deep);
  font-size: .85rem;
}

.woocommerce .star-rating::before { color: var(--line); }

/* --------------------------------------------------------------------------
   Notices

   Success, info and error messages. Mapped onto the theme's callout shape so a
   coupon notice does not look like a system message from another website.
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 0 0 22px;
  list-style: none;
  font-size: .92rem;
  color: var(--ink);
}

.woocommerce-message { border-left-color: #6E8264; }
.woocommerce-info,
.woocommerce-noreviews { border-left-color: var(--pink); }
.woocommerce-error { border-left-color: var(--pink-btn); }

.woocommerce-error li { margin: 0 0 6px; }
.woocommerce-error li:last-child { margin-bottom: 0; }

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Forms

   Matches .field input in the theme stylesheet: same border weight, same
   radius, same focus ring. A checkout or a coupon field should not look like a
   different website's form.
   -------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-page form .form-row input.input-text {
  width: 100%;
  font-family: var(--body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--pink-btn);
  background: var(--paper);
  box-shadow: 0 0 0 3.5px rgba(176, 78, 53, .12);
}

.woocommerce form .form-row label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.woocommerce form .form-row .required { color: var(--pink-btn); text-decoration: none; }

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--pink-btn);
  background: #FDF4EE;
}

.woocommerce form .form-row.woocommerce-invalid label { color: var(--pink-btn); }

/* --------------------------------------------------------------------------
   Tables — cart, order details, account

   Kept although the shop is off: an order confirmation still has to be legible
   if one is ever opened from a bookmark, and the account area renders a table
   the moment the plugin is active.
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--paper);
}

.woocommerce table.shop_table th {
  background: var(--mist);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 13px 16px;
  text-align: left;
}

.woocommerce table.shop_table td {
  padding: 15px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: .93rem;
}

/* --------------------------------------------------------------------------
   Pagination — the archive's own pager
   -------------------------------------------------------------------------- */

.shop-pager .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.shop-pager .woocommerce-pagination ul li {
  border: 0;
  margin: 0;
}

.shop-pager .woocommerce-pagination a,
.shop-pager .woocommerce-pagination span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper);
  text-decoration: none;
}

.shop-pager .woocommerce-pagination a:hover {
  background: var(--pink-soft);
  border-color: var(--pink);
  color: var(--pink-text);
}

.shop-pager .woocommerce-pagination span.current {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Tabs and accordion on a single product

   Not used by the theme's own detail template, which lays the same information
   out in the page. Present because a shortcode-rendered product can still ask
   for tabs.
   -------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--pink);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Quantity inputs — WooCommerce's stepper

   Present for completeness. With the display-only setting on, is_purchasable()
   is false and none of this renders; it is here so that turning the shop on
   does not produce an unstyled number box in the middle of a finished page.
   -------------------------------------------------------------------------- */

.woocommerce .quantity input[type="number"] {
  width: 84px;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: .95rem;
  text-align: center;
}