/**
 * Fraction Research — WooCommerce Styles
 * woocommerce.css
 *
 * Loaded only when WooCommerce is active.
 * Targets both classic WooCommerce templates and WooCommerce blocks.
 */

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.woocommerce ul.products,
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr ) !important;
	gap: 20px !important;
	margin: 0 !important;
}

@media ( max-width: 900px ) {
	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat( 2, 1fr ) !important;
	}
}

@media ( max-width: 540px ) {
	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: #ffffff !important;
	border: 1px solid var( --fr-border, #dde4f0 ) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	display: flex !important;
	flex-direction: column !important;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	border-color: var( --fr-border-strong, #b8c8df ) !important;
	box-shadow: 0 4px 16px rgba( 13, 27, 46, 0.09 ), 0 2px 6px rgba( 13, 27, 46, 0.05 ) !important;
}

/* ============================================================
   PRODUCT IMAGE
   ============================================================ */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	width: 100% !important;
	height: 168px !important;
	object-fit: contain !important;
	background: var( --fr-bg-subtle, #f5f7fb ) !important;
	padding: 20px !important;
	margin: 0 !important;
	border-bottom: 1px solid var( --fr-border, #dde4f0 );
}

/* ============================================================
   PRODUCT TITLE
   ============================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: 'Work Sans', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	color: var( --fr-navy-dark, #0d1b2e ) !important;
	padding: 18px 20px 4px !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

/* ============================================================
   PRODUCT PRICE
   ============================================================ */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	font-family: 'Work Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var( --fr-navy-dark, #0d1b2e ) !important;
	padding: 4px 20px 16px !important;
	margin: 0 !important;
}

.woocommerce ul.products li.product .price del {
	color: var( --fr-text-3, #8fa0bb ) !important;
	font-weight: 400 !important;
	font-size: 13px !important;
}

/* ============================================================
   ADD TO CART BUTTON (product grid)
   ============================================================ */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.wc-block-grid__product .wp-block-button__link {
	display: block !important;
	width: calc( 100% - 40px ) !important;
	margin: 0 20px 20px !important;
	background: var( --fr-navy, #1a2744 ) !important;
	color: #ffffff !important;
	border: 1.5px solid var( --fr-navy, #1a2744 ) !important;
	border-radius: 7px !important;
	font-family: 'Work Sans', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 10px 16px !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: background 0.2s ease !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
	background: var( --fr-navy-hover, #243358 ) !important;
	color: #ffffff !important;
}

/* COA link beneath product card */
.fr-product-coa-link {
	display: block;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var( --fr-text-3, #8fa0bb );
	text-decoration: none;
	letter-spacing: 0.08em;
	padding-bottom: 16px;
	transition: color 0.2s ease;
}
.fr-product-coa-link:hover { color: var( --fr-navy, #1a2744 ); }

/* ============================================================
   SALE BADGE
   ============================================================ */
.woocommerce span.onsale {
	background: var( --fr-navy, #1a2744 ) !important;
	border-radius: 6px !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px !important;
	letter-spacing: 0.06em !important;
	min-width: auto !important;
	min-height: auto !important;
	padding: 4px 8px !important;
	line-height: 1.4 !important;
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.woocommerce div.product .product_title {
	font-family: 'Work Sans', sans-serif !important;
	font-size: clamp( 24px, 3vw, 36px ) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	color: var( --fr-navy-dark, #0d1b2e ) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: 'Work Sans', sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var( --fr-navy-dark, #0d1b2e ) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 14px !important;
	color: var( --fr-text-2, #4b607e ) !important;
	line-height: 1.8 !important;
}

/* ============================================================
   FORM INPUTS (cart, checkout, account)
   ============================================================ */
.woocommerce form .input-text,
.woocommerce-page form .input-text,
.woocommerce form select,
.woocommerce-page form select {
	border: 1px solid var( --fr-border, #dde4f0 ) !important;
	border-radius: var( --fr-r, 8px ) !important;
	font-family: 'Work Sans', sans-serif !important;
	font-size: 14px !important;
	color: var( --fr-navy-dark, #0d1b2e ) !important;
	padding: 10px 14px !important;
	transition: border-color 0.2s ease !important;
	box-shadow: none !important;
}

.woocommerce form .input-text:focus,
.woocommerce-page form .input-text:focus {
	border-color: var( --fr-navy, #1a2744 ) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba( 26, 39, 68, 0.08 ) !important;
}

/* ============================================================
   PRIMARY ACTION BUTTON (checkout, account, etc.)
   ============================================================ */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .button.button-primary,
.wc-block-components-button {
	background: var( --fr-navy, #1a2744 ) !important;
	color: #ffffff !important;
	border: 1.5px solid var( --fr-navy, #1a2744 ) !important;
	border-radius: var( --fr-r, 8px ) !important;
	font-family: 'Work Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition: background 0.2s ease !important;
	box-shadow: none !important;
}

.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var( --fr-navy-hover, #243358 ) !important;
	color: #ffffff !important;
}

/* Secondary button style */
.woocommerce .button:not( .alt ),
.woocommerce a.button:not( .alt ) {
	background: transparent !important;
	color: var( --fr-navy, #1a2744 ) !important;
	border: 1.5px solid var( --fr-border-strong, #b8c8df ) !important;
	border-radius: var( --fr-r, 8px ) !important;
	font-family: 'Work Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	transition: background 0.2s ease, border-color 0.2s ease !important;
}

.woocommerce .button:not( .alt ):hover {
	background: var( --fr-bg-subtle, #f5f7fb ) !important;
	border-color: var( --fr-navy, #1a2744 ) !important;
	color: var( --fr-navy, #1a2744 ) !important;
}

/* ============================================================
   CART TABLE
   ============================================================ */
.woocommerce table.shop_table {
	border: 1px solid var( --fr-border, #dde4f0 ) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
}

.woocommerce table.shop_table th {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var( --fr-text-3, #8fa0bb ) !important;
	background: var( --fr-bg-subtle, #f5f7fb ) !important;
	border-bottom: 1px solid var( --fr-border, #dde4f0 ) !important;
	padding: 14px 16px !important;
}

.woocommerce table.shop_table td {
	border-bottom: 1px solid var( --fr-border, #dde4f0 ) !important;
	padding: 16px !important;
	font-size: 14px !important;
	color: var( --fr-text-2, #4b607e ) !important;
}

/* ============================================================
   ORDER NOTES / NOTICES
   ============================================================ */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var( --fr-navy, #1a2744 ) !important;
	background: var( --fr-bg-subtle, #f5f7fb ) !important;
}

.woocommerce-error {
	border-top-color: #dc2626 !important;
}

/* ============================================================
   STAR RATINGS
   ============================================================ */
.woocommerce .star-rating span::before,
.woocommerce p.stars a:hover::before,
.woocommerce p.stars a.active::before {
	color: var( --fr-ice, #A8D8EA ) !important;
}

/* ============================================================
   VARIATION DROPDOWN (size selector)
   ============================================================ */
.woocommerce div.product .variations select {
	border: 1px solid var( --fr-border, #dde4f0 ) !important;
	border-radius: var( --fr-r, 8px ) !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 12px !important;
	padding: 8px 12px !important;
	color: var( --fr-text-1, #0d1b2e ) !important;
	background: var( --fr-white, #fff ) !important;
}