/* =========================================================================
   WW1AHT MASTER — WOOCOMMERCE
   The shop, styled to inherit the site's tokens, type, buttons and spacing.
   No WooCommerce core files are modified. Loaded only on shop pages.
   Prices, titles and headings use the heading font; buttons map to the theme
   button tiers. Donate scarlet is reserved for the sale badge / old price.
   ========================================================================= */

.woocommerce-wrap { }

/* ---- Buttons: two tiers ------------------------------------------------ */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 1rem;
  background: var(--primary); color: var(--bg); border: none; border-radius: var(--radius);
  padding: 13px 26px; transition: background var(--dur-menu) var(--ease); text-shadow: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { background: var(--primary-dark); color: var(--bg); }

/* Solid primary — the buy actions */
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout .checkout-button {
  background: var(--primary); color: var(--bg); border: none; font-size: 1.05rem;
}

/* Outline secondary — loop add-to-cart, update, coupon */
.woocommerce ul.products li.product .button,
.woocommerce .cart .button, .woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"], .woocommerce .added_to_cart {
  background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 10px 18px;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce .cart .button:hover, .woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover { background: var(--primary); color: var(--bg); }

/* ---- Prices ------------------------------------------------------------ */
.woocommerce .price, .woocommerce ul.products li.product .price {
  font-family: var(--font-heading); font-weight: var(--fw-heading); color: var(--text);
}
.woocommerce del { color: var(--muted); }
.woocommerce ins { color: var(--donate); text-decoration: none; }
.woocommerce span.onsale {
  background: var(--donate); color: #fff; font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 2px; min-height: 0;
  min-width: 0; line-height: 1.6; top: 10px; left: 10px; margin: 0;
}

/* ---- Result count / ordering ------------------------------------------ */
.woocommerce .woocommerce-result-count { color: var(--muted); font-size: 0.95rem; }
.woocommerce .woocommerce-ordering select { width: auto; padding: 6px 10px; }

/* ---- Product grid ------------------------------------------------------ */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: 100%; float: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.woocommerce ul.products li.product a img { margin: 0; border-radius: 0; aspect-ratio: 1 / 1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.3rem;
  color: var(--primary); line-height: 1.1; padding: 12px 16px 0;
}
.woocommerce ul.products li.product .price { display: block; padding: 4px 16px 0; font-size: 1.35rem; }
.woocommerce ul.products li.product .button { margin: 12px 16px 16px; align-self: flex-start; }

/* ---- Single product ---------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb { color: var(--muted); font-size: 0.85rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--accent-ink); }
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.woocommerce div.product .woocommerce-product-gallery { margin: 0; }
.woocommerce div.product .product_title { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.04; margin: 0 0 10px; }
.woocommerce div.product .summary .price { font-size: 2.2rem; margin-bottom: 16px; }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 1.1rem; margin-bottom: 22px; }
.woocommerce div.product form.cart { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.woocommerce div.product form.cart .quantity { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.woocommerce div.product form.cart .quantity input.qty { width: 4em; border: none; text-align: center; background: var(--surface); }
.woocommerce div.product .single_add_to_cart_button { flex: 1; }
.woocommerce div.product .product_meta { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; font-size: 0.9rem; color: var(--muted); }
.woocommerce div.product .product_meta a { color: var(--accent-ink); }

/* ---- Tabs -------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 24px; border-bottom: 2px solid var(--line); padding: 0; margin: 0 0 22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: none; border-radius: 0; padding: 0; margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.3rem;
  color: var(--muted); padding: 0 0 10px; text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--primary); border-bottom: 2px solid var(--primary); margin-bottom: -2px; }

/* ---- Related ----------------------------------------------------------- */
.woocommerce .related.products h2, .woocommerce .up-sells h2 { font-size: 1.8rem; color: var(--primary); }
.woocommerce .related.products ul.products { grid-template-columns: repeat(4, 1fr); }

/* ---- Cart -------------------------------------------------------------- */
.woocommerce table.shop_table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); border-collapse: collapse; }
.woocommerce table.shop_table th { font-family: var(--font-heading); font-weight: var(--fw-heading); color: var(--primary); border-bottom: 2px solid var(--line); }
.woocommerce table.shop_table td { border-top: 1px solid var(--line); }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-family: var(--font-heading); color: var(--primary); }
.woocommerce .cart-collaterals .cart_totals { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 20px; background: var(--surface); }

/* ---- Forms (cart/checkout) — match site fields ------------------------ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-selection {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 14px; font-family: var(--font-body); font-size: 1rem; color: var(--text);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: 2px solid var(--accent); border-color: var(--primary); }
.woocommerce form .form-row label { color: var(--accent-ink); font-size: 0.85rem; font-weight: var(--fw-semibold); }
.woocommerce .woocommerce-invalid input.input-text { border-color: var(--donate); }

/* ---- Checkout payment -------------------------------------------------- */
.woocommerce-checkout #payment { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.woocommerce-checkout #payment .payment_box { background: var(--bg); color: var(--muted); border-radius: var(--radius); }

/* ---- Notices ----------------------------------------------------------- */
.woocommerce-message, .woocommerce-info { border-top-color: var(--primary); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--primary); }
.woocommerce-error { border-top-color: var(--donate); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce .related.products ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .woocommerce ul.products, .woocommerce .related.products ul.products { grid-template-columns: 1fr; }
}

/* =========================================================================
   SHOP REVIEW FIXES — 8 August 2026
   Raised by the Chief Trustee during the pre-launch inner-page review.
   ========================================================================= */

/* ---- 1. Escape the two-column grid --------------------------------------
   `div.product` is a two-column grid: gallery left, summary right. Everything
   else inside it — the tabs, related products, reviews — is also a grid child,
   so each was being dealt into a half-width column. That is why "Additional
   information" sat under the image in the left half and Related Products was
   squeezed into a third of the page. These belong across the full width.     */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells,
.woocommerce div.product #reviews {
  grid-column: 1 / -1;
}
.woocommerce div.product .woocommerce-tabs { margin-top: var(--space-xl); }
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells { margin-top: var(--space-lg); }

/* ---- 2. Product image fills its column -----------------------------------
   The gallery was rendering the image at its intrinsic size, leaving it
   stranded in a large empty column. Frame it and let it fill.                */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image { width: 100%; }

/* WooCommerce's own float layout puts width:48% on both columns. Inside our
   grid that is 48% of an already-halved cell, so the description was rendering
   in a ribbon barely 250px wide with a third of the page left empty beside it.
   Neutralise the float widths and let the grid do the work.

   NOTE ON SPECIFICITY: woocommerce-layout.css uses `div.summary`, not
   `.summary`. A `.summary` selector here scores one element lower and quietly
   loses, which is exactly what happened on the first attempt. Match their
   element qualifiers and add the second class so this wins outright. */
.woocommerce div.product div.summary,
.woocommerce div.product div.summary.entry-summary,
.woocommerce div.product div.images {
  width: 100%;
  float: none;
  margin: 0;
}
.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%; height: auto; display: block;
}
/* Zoom trigger sits inside the frame, not over the page. */
.woocommerce div.product .woocommerce-product-gallery__trigger { top: 12px; right: 12px; left: auto; }

/* ---- 3. Map WooCommerce's own colour tokens to the Trust palette ---------
   WooCommerce 8+ colours its buttons and blocks from --wc-* custom properties
   (default: a purple). Remapping them at the top of the shop is far more
   robust than chasing individual selectors, and it catches the block-based
   cart and checkout too.                                                    */
.woocommerce, .woocommerce-page,
.wc-block-components-form, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
  --wc-primary:        var(--primary);
  --wc-primary-text:   var(--bg);
  --wc-secondary:      var(--accent);
  --wc-secondary-text: var(--primary-dark);
  --wc-highlight:      var(--donate);
  --wc-highlight-text: #ffffff;
  --wc-content-bg:     var(--surface);
  --wc-form-border-color: var(--line);
}

/* Belt and braces on the buy actions — these must never render purple. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.button,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: var(--primary);
  color: var(--bg);
  border: none;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.button:hover,
.woocommerce #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--primary-dark);
  color: var(--bg);
}

/* ---- 4. Loop buttons must not wrap --------------------------------------
   "Add to cart" was breaking onto three lines in narrow related-product
   cards.                                                                    */
.woocommerce ul.products li.product .button { white-space: nowrap; }

/* Related products: size to the space rather than a fixed column count, so
   two related items do not stretch and five do not crush. */
.woocommerce .related.products ul.products,
.woocommerce .up-sells ul.products {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ---- 5. Missing-image placeholder ---------------------------------------
   Products with no image showed WooCommerce's grey stock icon. Use the
   theme's own hatched placeholder so a gap looks deliberate, not broken.
   The real fix for the Donation products is to upload artwork — this is the
   safety net beneath it.                                                    */
.woocommerce .woocommerce-placeholder,
.woocommerce img.woocommerce-placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(42, 62, 92, 0.05) 0 10px,
    rgba(42, 62, 92, 0.09) 10px 20px
  );
  object-fit: contain;
  opacity: 0.55;
  padding: 12%;
}

/* On a single product a missing image otherwise becomes a huge empty panel
   the full height of the column. Cap it to a sensible shape. */
.woocommerce div.product div.images img.woocommerce-placeholder {
  aspect-ratio: 3 / 2;
  height: auto;
  padding: 15%;
  opacity: 0.35;
}

/* ---- 5b. Don't print the tab name twice ---------------------------------
   WooCommerce renders the tab label AND an <h2> of the same words inside the
   panel below it. With a single tab that reads as a mistake.                */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child { display: none; }

/* ---- 6. Block-based cart & checkout -------------------------------------
   The basket and checkout are WooCommerce Blocks, not the classic templates,
   so they carry a different set of class names entirely.                    */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--primary) !important;
  color: var(--bg) !important;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius);
  padding: 15px 28px;
  text-decoration: none;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--primary-dark) !important;
  color: var(--bg) !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-heading);
  color: var(--primary);
}
.wc-block-components-product-name { color: var(--primary); font-weight: var(--fw-semibold); }
.wc-block-components-sidebar .wc-block-components-totals-wrapper {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-md);
}

/* ---- 7. My Account -------------------------------------------------------
   The login form's fields are styled by _components.css once they are allowed
   to exist at all (see page.php). This just gives the panel a shape.        */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-lg);
  max-width: 520px;
}
.woocommerce-account .woocommerce-form-login .form-row { margin-bottom: var(--space-md); }
.woocommerce-account .woocommerce-form-login label.woocommerce-form-login__rememberme {
  display: block; margin: var(--space-sm) 0 var(--space-md); color: var(--muted);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 8px 0; color: var(--primary); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--accent-ink); font-weight: var(--fw-semibold); }

/* ---- 8. Basket link in the header ---------------------------------------
   DELIBERATELY NOT HERE. The basket link is printed in the site header on
   EVERY page, but this stylesheet is only enqueued on shop pages — so its
   rules were absent everywhere else and the SVG fell back to filling its
   container at ~46px. It lives in _navigation.css with the rest of the header
   furniture. Do not move it back.                                            */

/* ---- 9. Responsive corrections ------------------------------------------
   RECURRING GOTCHA: a desktop grid-auto-flow must be reset to row inside the
   breakpoint or the mobile column rules are ignored.                        */
@media (max-width: 860px) {
  .woocommerce div.product { grid-auto-flow: row; }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related.products,
  .woocommerce div.product .up-sells,
  .woocommerce div.product #reviews { grid-column: 1 / -1; }
  .woocommerce div.product form.cart { flex-wrap: wrap; }
  .woocommerce div.product .single_add_to_cart_button { flex: 1 1 100%; }
}