/*
Theme Name: Corxyn Theme
Theme URI: https://corxyngroup.com
Author: Ali
Description: Block theme for Corxyn Group, a technology infrastructure and solutions provider. Built for a large B2B WooCommerce catalog: part numbers are primary content, specifications are readable as text, and product grids stay dense enough to scan. Contains no custom input handling, so its security surface is templates and CSS only.
Version: 1.0.1
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: corxyn
Tags: block-theme, full-site-editing, e-commerce, business, accessibility-ready
*/

/* ---------------------------------------------------------------
   Corxyn Theme
   Tokens live in theme.json. This file styles what theme.json
   cannot reach: WooCommerce classic-template markup, and a few
   component details.
   Never hardcode a colour here that exists as a token. Use var().
   --------------------------------------------------------------- */

/* ---------- 1. Base ---------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Focus visibility. Never remove this without a stronger replacement.
   WCAG 2.2 AA, and the sticky header must never obscure it. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Skip link must be the first focusable element and actually visible on focus */
.skip-link:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	border-radius: 4px;
}

/* Wide content that cannot reflow scrolls inside itself, never the page body */
.entry-content table,
.woocommerce-product-details__short-description table,
.shop_attributes {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/* ---------- 2. Header ---------- */

.corxyn-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.corxyn-header .wp-block-navigation {
	font-weight: 500;
}

.corxyn-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* Account and cart icons, the pair carried over from the previous theme */
.corxyn-header .wc-block-customer-account,
.corxyn-header .wc-block-mini-cart {
	display: flex;
	align-items: center;
}

.corxyn-header .wc-block-customer-account__account-icon svg,
.corxyn-header .wc-block-mini-cart__icon {
	width: 24px;
	height: 24px;
}

/* Target size: WCAG 2.2 AA requires 24x24 minimum */
.corxyn-header .wc-block-customer-account button,
.corxyn-header .wc-block-mini-cart__button {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------- 3. Product grid ---------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

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

/* Every descendant inherits border-box. Without this, a button at width:100%
   adds its own padding on top of that and overflows the card. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product * {
	box-sizing: border-box;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30);
	overflow: hidden;
	transition: border-color 150ms ease-out, transform 150ms ease-out;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface);
	border-radius: 4px;
}

/* Product titles carry long part numbers. Do not truncate them, buyers search on them. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
	color: var(--wp--preset--color--contrast);
	overflow-wrap: anywhere;
}

/* Price is the last item before the button, and it carries the auto margin so
   that prices and buttons line up across cards of differing title length. */
.woocommerce ul.products li.product .price {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--20);
}

.woocommerce ul.products li.product .price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 0.4em;
}

/* ---------- 4. Buttons ---------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 4px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7em 1.4em;
	line-height: 1.4;
	min-height: 44px;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Catalog tile button. Constrained to the card's content box: border-box sizing
   above, plus max-width, plus margin reset. WooCommerce ships its own margins
   on .button which otherwise push it past the card edge. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: var(--wp--preset--spacing--20) 0 0 !important;
	padding: 0.6em 0.9em;
	min-height: 42px;
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

.woocommerce ul.products li.product a.added_to_cart {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--border);
	text-decoration: none;
}

/* The SKU line sits above the title. Keep it tight and unmistakably monospace. */
.woocommerce ul.products li.product .corxyn-loop-sku {
	display: block;
	margin: 0 0 0.35em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* ---------- 5. Single product ---------- */

.woocommerce div.product .product_title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.woocommerce div.product .price {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* SKU is a primary search term on a B2B catalog. Make it selectable and obvious. */
.woocommerce div.product .product_meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
}

.woocommerce div.product .product_meta .sku {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	user-select: all;
}

/* Specification table. This is the content procurement buyers actually read,
   and it must be HTML text so assistants and screen readers can extract it. */
.woocommerce table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	text-align: left;
	padding: 0.7em 1em;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.woocommerce table.shop_attributes th {
	font-weight: 600;
	width: 38%;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
}

/* Variation selectors need a real target size */
.woocommerce div.product form.cart .variations select {
	min-height: 44px;
	padding: 0.5em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.woocommerce .quantity input.qty {
	min-height: 44px;
	min-width: 64px;
	text-align: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}

/* ---------- 6. Stock state: never colour alone ---------- */

.woocommerce div.product .stock {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce div.product .stock.in-stock::before {
	content: "\2713\00a0";
}

.woocommerce div.product .stock.out-of-stock::before {
	content: "\2717\00a0";
}

/* ---------- 7. Notices ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- 8. Footer ---------- */

.corxyn-footer {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.corxyn-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.corxyn-footer a:hover {
	text-decoration: underline;
}

.corxyn-footer h2,
.corxyn-footer h3 {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--20);
}

.corxyn-footer .wp-block-social-links .wp-social-link {
	background: rgba(255, 255, 255, 0.12);
}

.corxyn-footer .wp-block-social-links .wp-social-link:hover {
	background: var(--wp--preset--color--accent);
}

/* ---------- 9. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}