/*
 * Shop styles ported from site-preview/assets/css/site.css section 8
 * (Shop), renamed to the --gp-* tokens in tokens.css. Loads only on
 * WooCommerce pages (shop, product, cart, checkout, account) — see the
 * conditional enqueue in functions.php.
 *
 * Covers what archive-product.php, content-product.php, single-product.php,
 * cart.php and form-checkout.php actually use.
 */

/* ===================================================== Shop category section */

.shop-category { scroll-margin-top: 140px; }
.shop-category + .shop-category { margin-top: var(--gp-space-12); }
.shop-category h3 { margin-bottom: var(--gp-space-1); }
.shop-category > p.small { margin-bottom: var(--gp-space-6); }

/* ===================================================== Audience tile grid */

.tile-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gp-space-4); }
@media (min-width: 900px) { .tile-grid { grid-template-columns: repeat(4, 1fr); gap: var(--gp-space-6); } }
.tile {
  display: flex; flex-direction: column; gap: var(--gp-space-3); height: 100%;
  padding: var(--gp-space-6); background: var(--gp-surface); border: 2px solid var(--gp-border);
  border-radius: var(--gp-radius-lg); color: var(--gp-text); text-decoration: none;
  transition: border-color 150ms ease;
}
.tile:hover { border-color: var(--gp-ink); }
.tile__title { font-family: var(--gp-font-heading); font-weight: 600; font-size: var(--gp-fs-h4); color: var(--gp-ink); }
.tile__text { font-size: var(--gp-fs-small); color: var(--gp-muted); }

/* ===================================================== Type/format filter */

.filters { display: flex; flex-direction: column; gap: var(--gp-space-3); margin-bottom: var(--gp-space-6); }
.filters__group { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gp-space-2); }
.filter-pill {
  display: inline-flex; align-items: center; min-height: var(--gp-tap-target); padding: 0 var(--gp-space-4);
  border: 2px solid var(--gp-control-border); border-radius: var(--gp-radius-pill); background: var(--gp-surface);
  color: var(--gp-text); text-decoration: none; font-family: var(--gp-font-heading); font-weight: 600;
  font-size: 0.9375rem; cursor: pointer; transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.filter-pill:hover { border-color: var(--gp-ink); color: var(--gp-ink); }
.filter-pill.is-active { background: var(--gp-ink); border-color: var(--gp-ink); color: var(--gp-surface); }

/* ===================================================== Product grid and card */

.product-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gp-space-6) var(--gp-space-4); }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--gp-space-8) var(--gp-space-6); } }
.product-card { display: flex; flex-direction: column; gap: var(--gp-space-3); }
.product-card__link { display: flex; flex-direction: column; gap: var(--gp-space-3); color: var(--gp-ink); text-decoration: none; }
.product-card__cover { aspect-ratio: 3 / 4; width: 100%; display: flex; align-items: center; justify-content: center; }
.product-card__cover img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px;
  box-shadow:
    3px 3px 0 0 var(--gp-surface),
    3px 3px 0 1px rgba(26, 26, 26, 0.14),
    6px 6px 0 0 var(--gp-surface),
    6px 6px 0 1px rgba(26, 26, 26, 0.1),
    8px 12px 20px rgba(26, 26, 26, 0.25);
}
.product-card__cover--placeholder { text-align: center; font-size: var(--gp-fs-small); font-style: italic; color: var(--gp-muted); }
.product-card__cover img.is-photo { box-shadow: 0 12px 24px rgba(26, 26, 26, 0.18); }
.product-card__title { font-size: var(--gp-fs-h4); }
.product-card__link:hover .product-card__title { text-decoration: underline; }
.product-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-space-2); font-size: var(--gp-fs-small); color: var(--gp-muted); }
.product-card__price { font-family: var(--gp-font-heading); font-weight: 700; font-size: 1.125rem; color: var(--gp-ink); }
.product-card .btn,
.product-card .button { align-self: flex-start; margin-top: auto; }
.pill--warn { background: var(--gp-error-tint); color: var(--gp-error); }

/* ===================================================== Info strip */

.info-strip { padding-block: var(--gp-space-12); }
.info-strip--teal { background: var(--gp-teal-tint); }
.info-strip--alt { background: var(--gp-surface-alt); }
.info-strip__inner { display: flex; flex-direction: column; gap: var(--gp-space-2); }
.info-strip h2 { font-size: var(--gp-fs-h3); }

/* ===================================================== Reassurance list */

.reassure { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gp-space-2) var(--gp-space-6); font-size: var(--gp-fs-small); color: var(--gp-text); }
.reassure li { display: inline-flex; align-items: center; gap: var(--gp-space-2); }
.reassure svg { color: var(--gp-teal-text); }

/* ===================================================== Product page */

.product-page { display: grid; gap: var(--gp-space-8); }
@media (min-width: 900px) { .product-page { grid-template-columns: 1fr 1fr; gap: var(--gp-space-16); } }
.product-page__cover {
  aspect-ratio: 3 / 4; width: 100%; object-fit: contain; border-radius: 4px;
  box-shadow:
    4px 4px 0 0 var(--gp-surface),
    4px 4px 0 1px rgba(26, 26, 26, 0.14),
    8px 8px 0 0 var(--gp-surface),
    8px 8px 0 1px rgba(26, 26, 26, 0.1),
    12px 18px 28px rgba(26, 26, 26, 0.25);
}
.product-page__price { font-family: var(--gp-font-heading); font-weight: 700; font-size: 1.75rem; color: var(--gp-ink); }

.dl-details { display: grid; grid-template-columns: max-content 1fr; gap: var(--gp-space-2) var(--gp-space-6); margin: 0; }
.dl-details dt { font-family: var(--gp-font-heading); font-weight: 600; color: var(--gp-ink); }
.dl-details dd { margin: 0; color: var(--gp-text); }

/*
 * WooCommerce's native single-product add-to-cart form (quantity input +
 * button). The real rendered markup is just <form class="cart"> -- no
 * "single_add_to_cart_wrap" class exists on it, so that selector never
 * matched and this fell back to the browser/WC defaults (stacked, but
 * with the wrong gap and no visible "Quantity" label, since WooCommerce's
 * own template marks that label screen-reader-only). functions.php wraps
 * the quantity field in a .field div (reusing the same label+input
 * pattern as the contact form) via woocommerce_before/after_add_to_cart_
 * quantity, so this reuses .field as-is -- just needs the outer stack gap.
 */
form.cart { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gp-space-6); }
form.cart input.qty { font: inherit; font-size: 1.0625rem; min-height: var(--gp-tap-target); width: 5rem; padding: 0.625rem 0.875rem; border: 2px solid var(--gp-control-border); border-radius: var(--gp-radius-sm); }
.single_add_to_cart_button,
.checkout-button,
#place_order {
  display: inline-flex; align-items: center; gap: var(--gp-space-2);
  min-height: 52px; margin-top: 0; padding: 0 1.75rem;
  border: 2px solid transparent; border-radius: var(--gp-radius-md);
  font-family: var(--gp-font-heading); font-weight: 600; font-size: var(--gp-fs-button);
  text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease;
  /*
   * !important: WooCommerce's own bundled woocommerce.css ships
   * `body.woocommerce ... button.button.alt { background-color: #7f54b3 }`
   * (specificity 0,3,1 via the .woocommerce body class WC adds
   * automatically) — narrowly overriding just the two colour properties
   * here rather than chasing that specificity or dequeuing the stylesheet
   * wholesale, since we still want its other native Woo styles. Covers the
   * single-product add-to-cart button plus the cart/checkout "button alt"
   * buttons (proceed to checkout, place order), which share the same class.
   */
  background: var(--gp-brand-yellow) !important;
  color: var(--gp-on-brand) !important;
}
.single_add_to_cart_button:hover, .single_add_to_cart_button:active,
.checkout-button:hover, .checkout-button:active,
#place_order:hover, #place_order:active { background: var(--gp-brand-yellow-hover) !important; }

/* ===================================================== Cart & checkout (native WooCommerce markup) */
/*
 * Neither Jessica nor Salama had a cart/checkout override to reuse (shop-
 * plan.md §7/§7a) — this styles WooCommerce's own cart.php/form-checkout.php
 * markup/class names directly rather than inventing new ones, since the
 * theme overrides (woocommerce/cart/cart.php, woocommerce/checkout/
 * form-checkout.php) only change the outer wrapper, not the inner hooks.
 */

.woocommerce-cart-form table.cart,
.woocommerce-checkout-review-order-table,
.cart_totals table {
  width: 100%; border-collapse: collapse; margin-bottom: var(--gp-space-6);
}
.woocommerce-cart-form table.cart th,
.woocommerce-cart-form table.cart td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.cart_totals table th,
.cart_totals table td {
  padding: var(--gp-space-4) var(--gp-space-3); text-align: left; border-bottom: 1px solid var(--gp-control-border);
}
.woocommerce-cart-form table.cart th.product-price,
.woocommerce-cart-form table.cart th.product-quantity,
.woocommerce-cart-form table.cart th.product-subtotal,
.woocommerce-cart-form table.cart td.product-price,
.woocommerce-cart-form table.cart td.product-quantity,
.woocommerce-cart-form table.cart td.product-subtotal { text-align: right; }
.woocommerce-cart-form table.cart td.product-thumbnail img { width: 72px; height: auto; border-radius: 3px; }
.woocommerce-cart-form table.cart td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  color: var(--gp-error); text-decoration: none; font-size: 1.25rem; line-height: 1;
}
.woocommerce-cart-form table.cart td.product-remove a.remove:hover { background: var(--gp-error-tint); }
.woocommerce-cart-form table.cart td.actions { text-align: right; }
.woocommerce-cart-form table.cart .coupon { display: inline-flex; gap: var(--gp-space-2); margin-right: var(--gp-space-4); }
.woocommerce-cart-form table.cart .coupon input#coupon_code {
  font: inherit; min-height: var(--gp-tap-target); padding: 0.5rem 0.75rem;
  border: 2px solid var(--gp-control-border); border-radius: var(--gp-radius-sm);
}
.quantity input.qty {
  font: inherit; font-size: 1.0625rem; width: 5rem; min-height: var(--gp-tap-target);
  padding: 0.5rem 0.75rem; border: 2px solid var(--gp-control-border); border-radius: var(--gp-radius-sm);
}

.cart-collaterals { display: flex; flex-direction: column; align-items: flex-end; gap: var(--gp-space-4); }
.cart-collaterals .reassure { flex-direction: column; align-items: flex-end; gap: var(--gp-space-2); width: 100%; max-width: 24rem; }
.cart_totals {
  width: 100%; max-width: 24rem; padding: var(--gp-space-6);
  background: var(--gp-surface-alt); border-radius: var(--gp-radius-lg);
}
.cart_totals h2 { font-size: var(--gp-fs-h4); margin-bottom: var(--gp-space-3); }
.cart_totals tr.order-total th, .cart_totals tr.order-total td { font-weight: 700; border-bottom: none; }
.wc-proceed-to-checkout { margin-top: var(--gp-space-4); }
.wc-proceed-to-checkout .reassure { margin-top: var(--gp-space-4); }

/*
 * Empty-cart notice -- WooCommerce's own wc_empty_cart_message() hardcodes
 * the "cart-empty woocommerce-info" classes, so this restyles them rather
 * than replacing the markup, same --gp-surface-alt/--gp-radius-lg
 * treatment as .cart_totals above for a consistent "boxed" look.
 */
.woocommerce-info.cart-empty {
  list-style: none; margin: 0 0 var(--gp-space-6); padding: var(--gp-space-6);
  background: var(--gp-surface-alt); border: none; border-radius: var(--gp-radius-lg);
  color: var(--gp-text);
}
/* WooCommerce's own ::before icon depends on its bundled icon font, which
 * isn't loaded on the frontend here -- rendered as a visible missing-glyph
 * box instead of an icon. Dropped rather than loading a font for one icon. */
.woocommerce-info.cart-empty::before { content: none; }
.return-to-shop { margin: 0; }

.woocommerce-checkout .col2-set { display: grid; gap: var(--gp-space-8); margin-bottom: var(--gp-space-8); }
@media (min-width: 900px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce-checkout h3 { font-size: var(--gp-fs-h4); margin-bottom: var(--gp-space-4); }
.woocommerce-checkout #ship-to-different-address { margin: var(--gp-space-6) 0 var(--gp-space-4); }
.woocommerce-checkout #ship-to-different-address label {
  display: flex; align-items: center; gap: var(--gp-space-2); font-size: var(--gp-fs-h4);
  font-family: var(--gp-font-heading); font-weight: 700; cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address-checkbox { width: 1.25rem; height: 1.25rem; }
.woocommerce-checkout .woocommerce-additional-fields { margin-top: var(--gp-space-8); }
.woocommerce-checkout .form-row { margin-bottom: var(--gp-space-4); }
.woocommerce-checkout .form-row label {
  display: block; font-family: var(--gp-font-heading); font-weight: 600; font-size: 1rem;
  color: var(--gp-ink); margin-bottom: var(--gp-space-2);
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select {
  font: inherit; font-size: 1.0625rem; color: var(--gp-text); background: var(--gp-surface);
  min-height: var(--gp-tap-target); padding: 0.625rem 0.875rem; width: 100%;
  border: 2px solid var(--gp-control-border); border-radius: var(--gp-radius-sm);
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus { outline: 3px solid var(--gp-brand-teal); outline-offset: 1px; border-color: var(--gp-ink); }
#order_review_heading { font-size: var(--gp-fs-h4); margin-bottom: var(--gp-space-4); }
#order_review {
  padding: var(--gp-space-6); background: var(--gp-surface-alt); border-radius: var(--gp-radius-lg); margin-bottom: var(--gp-space-6);
}
.wc_payment_methods { list-style: none; margin: 0 0 var(--gp-space-6); padding: 0; display: flex; flex-direction: column; gap: var(--gp-space-3); }
.wc_payment_methods .payment_method_bacs,
.wc_payment_methods li { padding: var(--gp-space-3); border: 2px solid var(--gp-control-border); border-radius: var(--gp-radius-sm); }
.wc_payment_methods .payment_box { margin-top: var(--gp-space-3); font-size: var(--gp-fs-small); color: var(--gp-muted); }
.place-order { margin-top: var(--gp-space-4); }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--gp-space-4); }