/*
 * Commerce skin. Tokens are injected from the client catalogue (see HP_Skin::assets), so
 * this file carries LAYOUT, never a client's colours.
 *
 * ⚠️ Cards are equal-height by grid, but that alone does not align a row: a one-line title
 * and a two-line title push the button to different heights. Every element below a
 * variable-height one is pinned, which is why the excerpt flexes and the button sits on
 * `margin-top:auto`.
 */

:root {
	--hpp-brand: #0b5c8a;
	--hpp-brand-dark: #094a6f;
	--hpp-accent: #d8232a;
	--hpp-ink: #2b2b2b;
	--hpp-line: #e3e6e9;
	--hpp-card-radius: 2px;
}

/* ---- catalogue grid --------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	/* 3 across at desktop, matching buildaflag.com's own catalogue. auto-fill gave 4 on a
	   1440 viewport, which makes the cards narrower than the client's live store. */
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hpp-line);
	border-radius: var(--hpp-card-radius);
	background: #fff;
	overflow: hidden;
	transition: box-shadow .18s ease, border-color .18s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: color-mix(in srgb, var(--hpp-brand) 35%, var(--hpp-line));
	box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
	border-bottom: 1px solid var(--hpp-line);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--hpp-brand);
	padding: 16px 18px 0;
	margin: 0;
}

.woocommerce ul.products li.product .hpp-card-excerpt {
	padding: 8px 18px 0;
	margin: 0;
	color: var(--hpp-ink);
	font-size: .9rem;
	line-height: 1.55;
	flex: 1 1 auto;          /* absorbs the title's line-count difference */
}

/* Pinned below everything variable, so buttons align across the row. */
.woocommerce ul.products li.product .button {
	margin: 16px 18px 18px !important;
	align-self: flex-start;
	background: var(--hpp-accent);
	color: #fff;
	border-radius: var(--hpp-card-radius);
	padding: 9px 16px;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.2;
	margin-top: auto !important;
}

.woocommerce ul.products li.product .button::after {
	content: " \203A";
	font-weight: 700;
}

.woocommerce ul.products li.product .button:hover {
	background: color-mix(in srgb, var(--hpp-accent) 85%, #000);
	color: #fff;
}

/* ---- archive head ----------------------------------------------------------------- */

.woocommerce-products-header__title,
.hpp-archive-title {
	color: var(--hpp-brand);
	font-weight: 600;
}

.term-description,
.woocommerce-product-details__short-description {
	color: var(--hpp-ink);
	line-height: 1.7;
	max-width: 70ch;
}

/* ---- configurator ------------------------------------------------------------------ */

.hpp-configurator {
	border: 1px solid var(--hpp-line);
	border-radius: var(--hpp-card-radius);
	padding: 20px 22px;
	background: #fff;
}

.hpp-title {
	margin: 0 0 14px;
	font-size: 1.15rem;
	color: var(--hpp-brand);
}

.hpp-configurator .hpp-input {
	border: 1px solid var(--hpp-line);
	border-radius: var(--hpp-card-radius);
	padding: 9px 11px;
	width: 100%;
	background: #fff;
	color: var(--hpp-ink);
}

.hpp-configurator label {
	font-weight: 600;
	font-size: .9rem;
	color: var(--hpp-ink);
	display: block;
	margin-bottom: 5px;
}

.hpp-field { margin-bottom: 14px; }

.hpp-price {
	border-top: 1px solid var(--hpp-line);
	margin-top: 16px;
	padding-top: 14px;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--hpp-brand);
}

@media (max-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.woocommerce ul.products { grid-template-columns: 1fr; gap: 20px; }
}


/* Elementor's archive-products widget sets its own column count with a class
   (.elementor-wc-products .products.columns-N) that beats a plain grid rule, so the grid
   above is stated with !important rather than raised in specificity blindly. */
.elementor-wc-products ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 28px;
}

.hpp-term-intro {
	max-width: 78ch;
	margin: 0 0 28px;
	color: var(--hpp-ink);
	line-height: 1.7;
}

.hpp-term-intro p { margin: 0 0 12px; }

@media (max-width: 1024px) {
	.elementor-wc-products ul.products,
	.woocommerce ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.elementor-wc-products ul.products,
	.woocommerce ul.products[class*="columns-"] {
		grid-template-columns: 1fr !important;
	}
}


/* ---- configurator: label left, control right --------------------------------------
   Matches the client's own PDP (their calculator even names the mode `sidebyside`).
   Collapses to stacked below 720px, where two columns leave the control too narrow. */

.hpp-configurator .hpp-field {
	display: grid;
	grid-template-columns: minmax(120px, 34%) 1fr;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.hpp-configurator .hpp-field label {
	margin-bottom: 0;
	font-weight: 500;
	color: var(--hpp-ink);
}

.hpp-configurator .hpp-field > div,
.hpp-configurator .hpp-field > .hpp-input { min-width: 0; }

.hpp-group {
	margin: 22px 0 12px;
	padding-top: 16px;
	border-top: 1px solid var(--hpp-line);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--hpp-ink);
}

.hpp-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Hints and checkboxes span both columns so they sit under the control, not beside it. */
.hpp-configurator .hpp-hint,
.hpp-configurator .hpp-bestfor { grid-column: 1 / -1; font-size: .82rem; opacity: .8; }

@media (max-width: 720px) {
	.hpp-configurator .hpp-field { grid-template-columns: 1fr; gap: 6px; }
	.hpp-configurator .hpp-field label { font-weight: 600; }
}


/* ---- cart & checkout ---------------------------------------------------------------
   Both are BLOCK-based (wc-block-*), so these target the block class names rather than
   the classic cart markup. WooCommerce ships its own button colours (dark grey on the
   cart, magenta on checkout) which belong to no brand at all. */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	background-color: var(--hpp-accent) !important;
	border-color: var(--hpp-accent) !important;
	color: #fff !important;
	border-radius: var(--hpp-card-radius) !important;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: color-mix(in srgb, var(--hpp-accent) 85%, #000) !important;
	border-color: color-mix(in srgb, var(--hpp-accent) 85%, #000) !important;
}

/* Product links in cart and order summary: brand blue, no underline. */
.wc-block-components-product-name,
.wc-block-cart-item__product a,
.wc-block-components-order-summary-item__description a {
	color: var(--hpp-brand) !important;
	text-decoration: none !important;
	font-weight: 600;
}

.wc-block-components-product-name:hover { text-decoration: underline !important; }

/* Section headings on cart/checkout. */
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-checkout h1,
.wc-block-components-title,
.wc-block-components-checkout-step__title {
	color: var(--hpp-brand);
}

/* The configured spec is the most useful thing on the line - give it room to be read
   rather than letting it run as one dense grey block. */
.wc-block-components-product-details {
	margin-top: 8px;
	font-size: .84rem;
	line-height: 1.6;
}

.wc-block-components-product-details__name { font-weight: 600; }

/* Totals + summary panels pick up the brand line colour. */
.wc-block-cart__totals-title,
.wc-block-components-totals-item__label { color: var(--hpp-ink); }

.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar .wc-block-components-panel {
	border-color: var(--hpp-line) !important;
	border-radius: var(--hpp-card-radius);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--hpp-brand);
	font-weight: 700;
}

/* Quantity stepper and form fields, so they match the configurator's inputs. */
.wc-block-components-quantity-selector,
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
	border-radius: var(--hpp-card-radius) !important;
}

/* ---- my account ------------------------------------------------------------------------
 *
 * The account area shipped as unstyled WooCommerce defaults with no heading of any kind on
 * any of its six pages. Layout only, as everywhere else in this file - the colours come from
 * the client tokens injected by HP_Skin.
 *
 * ⚠️ The h1 and the nav are siblings inside the same flex row, so the heading is pulled to
 * full width with `flex-basis:100%` rather than positioned - a float here drops the nav
 * under the content on narrow screens.
 */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.5rem;
}

.hpp-account-title {
	flex-basis: 100%;
	margin: 0 0 .25rem;
}

.hpp-account-greeting {
	flex-basis: 100%;
	margin: 0 0 1.75rem;
	color: var(--hpp-ink);
	opacity: .7;
	font-size: .95rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 15rem;
	max-width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hpp-line);
	border-radius: var(--hpp-card-radius);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--hpp-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: .7rem 1rem;
	text-decoration: none;
	color: var(--hpp-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--hpp-brand);
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 22rem;
	min-width: 0;   /* or a wide orders table forces the whole row to scroll */
}

/* The artwork/proof block on a customer's own order. */
.hpp-order-work {
	margin: 2rem 0;
}

.hpp-order-work h2 {
	font-size: 1.15rem;
	margin: 0 0 .75rem;
}

.hpp-work-table th {
	text-align: left;
	font-weight: 600;
	width: 45%;
}

/* Login and register sit side by side on desktop, stacked on a phone. */
.woocommerce-account .u-column1.col-1,
.woocommerce-account .u-column2.col-2 {
	flex: 1 1 20rem;
}

@media (max-width: 700px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex-basis: 100%;
		margin-bottom: 1.5rem;
	}
}

/* ---- single-product page container -------------------------------------------------
   BuildaFlag's review 2026-09-11: "All of the Product pages could use some padding.
   Mainly on the left side as all Product Page content is at the left edge of the screen."

   Measured before changing anything: the shop and category archives sit in a 1140px
   container (150px gutters at 1440), while the PDP ran the FULL viewport width - 0px
   either side at 1440 AND at 390, so on a phone the copy touched both edges.
   WooCommerce's single-product template renders outside whatever container the archives
   get from the page builder.

   ⚠️ This stylesheet is SHARED with Color Reflections and Houston Sign, so the rule is
   driven by custom properties that only BuildaFlag's catalogue sets. Unset, `none` and
   `0` are the initial values, so for every other client this is inert - the same
   opt-in-from-the-catalogue discipline as the rest of the skin. */
body.single-product .site-main,
body.single-product .content-area > .site-main {
	max-width: var(--hpp-content-max, none);
	margin-inline: auto;
	padding-inline: var(--hpp-content-pad, 0);
	box-sizing: border-box;
}

/* --- cart line: the customer's own artwork, and no marketing excerpt (BuildaFlag 2026-10-06) ---
   Ernesto: "use a thumbnail of the approved proof instead of the current image file icons".
   The thumbnail already WAS the approved design - the studio's own raster - but the block
   cart draws its image column ~48px wide, and a 3'x5' flag that is mostly white collapses
   into a pale sliver that reads as a file icon. Give a line carrying customer artwork a
   column wide enough to read, and an outline so a white flag still has edges.
   Matched by the alt text HP_Design / HP_Artwork set, so catalogue-photo lines keep
   WooCommerce's own layout. */
.wc-block-cart-items__row:has(img[alt="Your artwork for this item"]) .wc-block-cart-item__image {
	width: 132px;
}
.wc-block-cart-item__image img[alt="Your artwork for this item"] {
	width: 120px;
	max-width: 120px;
	height: auto;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--hpp-line, #d8e3f0);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
/* The block cart's phone layout keeps a fixed narrow image column. */
@media (max-width: 600px) {
	.wc-block-cart-item__image img[alt="Your artwork for this item"] {
		width: 84px;
		max-width: 84px;
	}
}
.wc-block-components-order-summary-item__image img[alt="Your artwork for this item"] {
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--hpp-line, #d8e3f0);
	border-radius: 3px;
}

/* Ernesto: the first sentence of the product description ("Why Choose our Horizontal
   Flags?") under the name. The block cart prints the short description, falling back to
   the long one - these products carry only a long one, written to sell on the PDP. In the
   basket the customer is checking WHAT they ordered, which is the spec list beneath it. */
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
	display: none;
}

/* Found while checking the two edits above at 390px: the theme gives `.alignwide` a -80px
   margin, which suits a 1440 desktop and pushes the cart and checkout blocks 70px off the
   left edge of a phone - the thumbnail sat at x=-70 and the totals labels were cut in half
   ("ed total"). Below the width where that bleed fits, the blocks sit in the page column. */
@media (max-width: 1299px) {
	.wp-block-woocommerce-cart.alignwide,
	.wp-block-woocommerce-checkout.alignwide {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}