/* WooCommerce: classic markup plus the block cart and checkout.
   Woo's own stylesheets are dequeued in inc/woocommerce.php, so everything the store
   renders is styled here. */

/* --- Shop and category archives --- */
.woocommerce-products-header { margin-bottom: var(--tm-space-6); }
.woocommerce-products-header__title { font-size: 34px; line-height: 40px; }

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

.woocommerce-ordering select { margin-bottom: var(--tm-space-5); }

.woocommerce-pagination ul { display: flex; gap: var(--tm-space-2); list-style: none; padding: 0; }
.woocommerce-pagination a,
.woocommerce-pagination span {
  display: inline-block;
  padding: var(--tm-space-2) var(--tm-space-3);
  border: 1px solid var(--tm-hairline);
  text-decoration: none;
}
.woocommerce-pagination .current { background: var(--tm-action); color: var(--tm-on-action); border-color: var(--tm-action); }

/* --- Single product --- */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tm-space-6);
  align-items: start;
}
.single-product .woocommerce-product-gallery { margin: 0; }
.single-product .summary { margin: 0; }
.single-product .price { font-size: 24px; line-height: 30px; font-weight: 700; }
.single-product .woocommerce-product-details__short-description { margin-block: var(--tm-space-4); }

.single-product form.cart { display: flex; flex-wrap: wrap; gap: var(--tm-space-3); align-items: center; margin-block: var(--tm-space-5); }
.single-product .quantity input { width: 5rem; text-align: center; }

.single-product .price { margin: 0 0 var(--tm-space-3); }
.single-product .tm-facts { list-style: none; margin: 0 0 var(--tm-space-2); padding: 0; }
.single-product .tm-fulfillment { margin: 0; }
.single-product .product_meta { margin-top: var(--tm-space-4); }

/* Panels render inside the summary, under the meta; related products span the full width. */
.tm-panels { margin-top: var(--tm-space-5); border-top: 1px solid var(--tm-hairline); }
.tm-panel { border-bottom: 1px solid var(--tm-hairline); }
.tm-panel__summary { display: flex; justify-content: space-between; gap: var(--tm-space-4); padding: var(--tm-space-3) 0; cursor: pointer; list-style: none; }
.tm-panel__summary::-webkit-details-marker { display: none; }
.tm-panel__summary::after { content: '+'; }
.tm-panel[open] > .tm-panel__summary::after { content: '\2013'; }
.tm-panel__body { padding: 0 0 var(--tm-space-4); }
.tm-panel__rows { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--tm-space-3); row-gap: var(--tm-space-2); margin: 0 0 var(--tm-space-4); }
.tm-panel__rows dt { font-weight: 700; }
.tm-panel__rows dd { margin: 0; }
.tm-panel .woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.tm-panel .woocommerce-product-attributes th,
.tm-panel .woocommerce-product-attributes td { text-align: left; vertical-align: top; padding: var(--tm-space-1) 0; }
.tm-panel .woocommerce-product-attributes th { padding-right: var(--tm-space-4); }
.tm-panel .woocommerce-product-attributes p { margin: 0; }

.related.products { grid-column: 1 / -1; margin-top: var(--tm-space-6); }

/* --- Buttons Woo renders itself --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
  background: var(--tm-action);
  color: var(--tm-on-action);
  border: 2px solid var(--tm-action);
  border-radius: var(--tm-radius-square);
  font-weight: 700;
  padding: var(--tm-space-3) var(--tm-space-5);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.woocommerce .button:hover { opacity: 0.9; }
.woocommerce .button.disabled,
.woocommerce .button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- Messages --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--tm-surface-panel);
  border: 1px solid var(--tm-hairline);
  border-left-width: 1px; /* no coloured left-border accent; the brand does not use them */
  padding: var(--tm-space-4);
  margin-bottom: var(--tm-space-5);
  list-style: none;
}
.woocommerce-error { border-color: var(--tm-text); }

/* One filled button per view: the "View cart" link inside the added-to-cart message is a
   text link, so "Add to cart" stays the only filled action on the product page. */
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button {
  background: none;
  color: var(--tm-text);
  border-color: transparent;
  padding: 0;
  margin-left: var(--tm-space-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce .woocommerce-message a.button:hover { opacity: 1; }

/* Sale price: the old price struck through, the current one plain. Browsers underline <ins>
   by default, which reads as a link. */
.price ins { text-decoration: none; }

/* --- Block cart and checkout ---
   These stay as Woo blocks: Local Pickup's address and per-location instructions, and
   the hiding of shipping fields, only work there. Woo's block CSS is scoped with its
   own custom properties, so the brand is applied by redefining them rather than by
   fighting selectors. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  --wp--preset--color--primary: var(--tm-action);
  font-family: var(--tm-font-sans);
  color: var(--tm-text);
}
.wc-block-components-button:not(.is-link) {
  background: var(--tm-action);
  color: var(--tm-on-action);
  border-radius: var(--tm-radius-square);
  font-weight: 700;
}
.wc-block-components-button:not(.is-link):hover { background: var(--tm-action); opacity: 0.9; }
.wc-block-components-title,
.wc-block-components-checkout-step__title { font-family: var(--tm-font-sans); font-weight: 700; }
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container {
  border-radius: var(--tm-radius-soft);
  border-color: var(--tm-text);
}
.wc-block-components-panel,
.wc-block-components-totals-wrapper { border-color: var(--tm-hairline); }
/* The sidebar element is only a gutter (left padding, no right), so the cream panel goes on
   the order summary block inside it, with a hairline instead of the block's 20% ink border. */
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--tm-surface-panel);
  border-color: var(--tm-hairline);
}

/* Square corners and no shadows on the block's own panels. Inputs keep radius-soft above;
   these are cards, option rows and notices, not controls. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option,
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-container,
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option,
.wp-block-woocommerce-checkout .wc-block-components-address-card,
.wp-block-woocommerce-checkout .wc-block-components-panel,
.wp-block-woocommerce-cart .wc-block-components-panel,
.wp-block-woocommerce-cart .wc-block-cart__submit-container,
.wc-block-components-notice-banner {
  border-radius: var(--tm-radius-square);
  box-shadow: none;
}
/* The block marks the chosen option with an inset shadow; mark it with a text-coloured
   border instead. Specificity has to beat the block's own two-class highlight rule. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option {
  border-radius: var(--tm-radius-square);
  box-shadow: none;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-color: var(--tm-text);
}

/* Local Pickup's own rows. The pickup address and instructions are the important text
   on this screen — keep them at full contrast, never in silver. */
.wc-block-checkout__shipping-method-container,
.wc-block-components-radio-control__option { color: var(--tm-text); }
.wc-block-components-radio-control-accordion-option { border-color: var(--tm-hairline); }

@media (max-width: 1024px) {
  ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .single-product div.product { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--tm-space-4); }
  .tm-card__body { padding: var(--tm-space-4); }
  /* Two-column cards are too narrow for price and fulfillment side by side. */
  .tm-card__foot { flex-direction: column; align-items: flex-start; gap: var(--tm-space-1); }
}