/*
Theme Name: iSupply Displays
Theme URI: http://isupply-displays-2.test/
Description: Child theme of Kadence for iSupply Displays — trade show and exhibition displays in Australia. Holds site-specific CSS and PHP so the Kadence parent stays updatable.
Author: iSupply Displays
Template: kadence
Version: 1.4.0
Requires PHP: 8.0
Text Domain: isupply-displays
*/

/* -------------------------------------------------------------------------
   Brand tokens — mirrors the Kadence global palette so custom CSS below can
   reference roles by name instead of repeating hex values. Editing the
   palette in Customizer > Colors updates --global-palette*; keep these in
   sync if the palette changes.
   ---------------------------------------------------------------------- */
:root {
	/* iSupply Studio design system. */
	--opt1-ink: #0b0d12;
	--opt1-muted: #5e6572;
	--opt1-line: #dfe4eb;
	--opt1-soft: #f4f7fa;
	--opt1-blue: #1769ff;
	--opt1-blue-dark: #084fcc;
	--opt1-white: #ffffff;

	--isd-blue:        var(--global-palette1, #2B6CB0); /* primary action  */
	--isd-blue-deep:   var(--global-palette2, #215387); /* hover / press   */
	--isd-ink:         var(--global-palette3, #1A202C); /* headings        */
	--isd-body:        var(--global-palette4, #2D3748); /* body copy       */
	--isd-muted:       var(--global-palette5, #4A5568); /* secondary copy  */
	--isd-hairline:    var(--global-palette7, #EDF2F7); /* borders, rules  */
	--isd-ground:      var(--global-palette8, #F7FAFC); /* tinted sections */
	--isd-surface:     var(--global-palette9, #FFFFFF); /* cards, header   */
}

/* -------------------------------------------------------------------------
   Site styles
   Add site-specific CSS below. This sheet loads after kadence-global and
   after Kadence's dynamic (Customizer) inline CSS, so plain selectors here
   override theme defaults without needing !important.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Product cards (Kadence Shop Kit loop template)

   As of v1.1.0 the shop and product-category archives render their own card
   from woocommerce/content-product.php and are styled by
   assets/css/isd-archive.css. The rules below apply to what is left of the
   Shop Kit "Product Card" template (post 2684) — related products and upsells
   on single product pages, and any [products] loop outside an archive.

   The card comes from the Kadence Shop Kit template "Product Card" (post
   2684): image, title, price, then a two-column row holding the WooCommerce
   add-to-cart button and a "View Product" button.

   Kadence prints each block's CSS in a <style> tag inside <body>, which lands
   after this stylesheet and at high specificity, so the overrides that fight
   a Kadence-generated rule are marked !important. Rules that don't collide
   are left plain.
   ---------------------------------------------------------------------- */

/* Card shell: a column so the action row can be pinned to the bottom. Card
   heights are equalised by the grid, and without this the leftover height
   collects as a gap in the middle of shorter cards. */
.woocommerce ul.products li.product.loop-entry {
	display: flex;
	flex-direction: column;
}

/* The template ends with an empty paragraph, which reserves a line of dead
   space under the buttons on every card. */
.woocommerce ul.products li.product p:empty {
	display: none;
}

/* 1 — Images -------------------------------------------------------------
   woocommerce_thumbnail_cropping is off, so source images keep their native
   aspect ratios and every card is a different height. Give each thumbnail an
   identical square box and fill it, so the titles and buttons below line up
   across the row. The photo is cropped to the box rather than letterboxed,
   matching the archive cards and the header menu tiles. */
.woocommerce ul.products li.product .kwt-image-wrap.kwt-image-loop a {
	display: block;
	aspect-ratio: 1 / 1;
}

.woocommerce ul.products li.product .kwt-image-wrap.kwt-image-loop img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* 2 — Title --------------------------------------------------------------
   24px bold serif, centred, wrapped to two ragged lines and left the action
   row sitting at a different height in every card. Smaller, left-aligned,
   tight leading, clamped to two lines with the space for both reserved. */
.woocommerce ul.products li.product .kwt-title-wrap .woocommerce-loop-product__title {
	font-size: 17px !important;
	line-height: 1.3 !important;
	text-align: left !important;
	font-weight: 600;
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em; /* 2 lines at the line-height above */
}

.woocommerce ul.products li.product .kwt-title-wrap .woocommerce-loop-product__title a {
	color: var(--isd-ink);
}

/* 3 — Price / quote ------------------------------------------------------
   254 of 373 products carry no price, which left this slot blank; the filter
   in functions.php substitutes a quote prompt.

   The price element is an inline <span> that carries both .price and
   .kwt-price-wrap, and it inherits centring from WooCommerce's
   `li.product { text-align: center }`. text-align does nothing on an inline
   box, so it has to become a block before it can align with the title. */
.woocommerce ul.products li.product .kwt-price-wrap {
	display: block !important; /* ships as a shrink-to-fit flex box */
	width: 100%;
	text-align: left !important;
	margin: 0 0 14px !important;
	font-size: 17px !important;
	color: var(--isd-ink);
}

.woocommerce ul.products li.product .kwt-price-wrap .isd-quote-price {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--isd-muted);
}

/* 4 — Action row ---------------------------------------------------------
   Pin to the bottom of the card, and put the buttons on one shared baseline.
   The template applies margin-left:-12px to the "View Product" button, which
   pulled it out of alignment with everything above it. */
.woocommerce ul.products li.product .kb-row-layout-wrap {
	margin-top: auto;
}

.woocommerce ul.products li.product .kt-row-column-wrap {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.woocommerce ul.products li.product .kt-row-column-wrap > .wp-block-kadence-column {
	flex: 1 1 0;
	min-width: 0;
}

.woocommerce ul.products li.product .wp-block-kadence-advancedbtn .kb-button {
	margin-left: 0 !important;
	width: 100%;
	justify-content: center;
}

.woocommerce ul.products li.product .kwt-add-to-cart-loop .button {
	width: 100%;
	text-align: center;
}

/* Quote-only products have no purchasable action, so the add-to-cart column
   is emptied in functions.php — collapse it and let "View Product" take the
   full width rather than leaving a half-width button. */
.woocommerce ul.products li.product.isd-quote-only .kt-row-column-wrap > .wp-block-kadence-column:first-child {
	display: none;
}
