/*
Theme Name: GP Blank Canvas
Theme URI: https://ntlofnyc.com/
Author: NTL of NYC
Author URI: https://ntlofnyc.com/
Description: A zero-CSS blank theme intended as a raw canvas for standalone HTML pages.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: gp-blank-canvas
*/

/*
 * WooCommerce layout and styling
 *
 * The GP Blank Canvas theme intentionally ships with no CSS so that you can
 * build your own design.  When WooCommerce is installed it outputs a large
 * amount of HTML for product archives, single product pages, the cart and
 * checkout.  Without some basic styling these pages can look broken or
 * confusing.  The WooCommerce developer handbook suggests adding custom
 * styles in your theme's stylesheet instead of editing the plugin's CSS【196892254447510†L315-L324】.  The
 * rules below provide a sensible grid for product lists, tidy up the
 * single product layout and adjust tables on cart and checkout pages.  You
 * can customise these further to match your brand.
 */

/* Container for all WooCommerce pages.  Constrain the width and add margin/padding. */
.woocommerce-main {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* Product archive grid.  Display products in a flexible, responsive grid. */
.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products li.product {
  border: 1px solid #e5e5e5;
  padding: 1rem;
  flex: 1 0 calc(25% - 2rem);
  box-sizing: border-box;
  transition: box-shadow 0.3s ease;
}
@media (max-width: 992px) {
  .woocommerce ul.products li.product {
    flex-basis: calc(50% - 2rem);
  }
}
@media (max-width: 600px) {
  .woocommerce ul.products li.product {
    flex-basis: 100%;
  }
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Single product page layout: display gallery and summary side-by-side on wide screens */
.woocommerce div.product {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.woocommerce div.product div.images {
  flex: 1 1 45%;
}
.woocommerce div.product div.summary {
  flex: 1 1 50%;
}
@media (max-width: 768px) {
  .woocommerce div.product {
    flex-direction: column;
  }
}

/* Cart and checkout tables: make them full width and add borders */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 1rem;
  border: 1px solid #ddd;
}

/* Button styling: use dark backgrounds for call‑to‑action buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #review_form #submit {
  background: #111;
  color: #fff;
  border: none;
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background 0.3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #review_form #submit:hover {
  background: #333;
}