/*
 * WooCommerce styles for usof theme (Lightning-inspired, minimal).
 * Loaded only on WooCommerce pages.
 */

/* ==========================================================================
   1. Layout / pages
   ========================================================================== */
.woocommerce { background: #fff; }
.woocommerce .woocommerce-breadcrumb { display: none; }
.woocommerce div.product { margin-bottom: 2em; }
.woocommerce div.product div.images { margin-bottom: 1.5em; }
.woocommerce div.product div.summary { margin-bottom: 2em; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--primary);
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.3;
}
.woocommerce div.product .product_title { font-size: 26px; margin-bottom: 0.4em; }
.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 1.5em; }
.woocommerce div.product form.cart { margin: 1.5em 0; }
.woocommerce div.product form.cart div.quantity { float: left; margin-right: 10px; }
.woocommerce .quantity .qty { width: 70px; text-align: center; }
.woocommerce div.product form.cart .button { float: left; }
.woocommerce div.product .product_meta { font-size: 13px; color: var(--text-light); border-top: 1px solid var(--border); padding-top: 1em; margin-top: 1.5em; }

/* Divider between the product summary and the tabs section. */
.woocommerce div.product .woocommerce-tabs {
	border-top: 3px solid #337ab7;
	padding-top: 20px;
}
.woocommerce div.product .product_meta > span { display: block; }

/* Product layout: image left, short description beside it, summary below. */
.woocommerce div.product div.images { float: left; width: 300px; }
.woocommerce div.product .product-short-description { float: right; width: calc(100% - 320px); }
.woocommerce div.product .summary { clear: both; }

/* onsale badge */
.woocommerce span.onsale {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--danger);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 3px;
	z-index: 2;
}

/* ==========================================================================
   2. Shop / product grid
   ========================================================================== */
ul.products {
	list-style: none;
	margin: 0 -15px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
ul.products li.product {
	position: relative;
	width: 33.333%;
	padding: 0 15px 30px 0;
	text-align: center;
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	margin: 0.8em 0 0.3em;
	padding: 0;
	border: none;
}
ul.products li.product .price {
	display: block;
	color: var(--primary);
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 0.8em;
}
ul.products li.product .button { display: inline-block; font-size: 13px; }
ul.products li.product img { margin: 0 auto; }
.woocommerce.columns-2 ul.products li.product { width: 50%; }
.woocommerce.columns-4 ul.products li.product { width: 25%; }

/* ==========================================================================
   3. Forms (checkout etc.)
   ========================================================================== */
.woocommerce form .form-row { padding: 4px 0; margin: 0 0 8px; }
.woocommerce form .form-row label { display: block; margin-bottom: 4px; font-weight: 400; }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
	width: 100%;
}
.woocommerce form .form-row-first { float: left; width: 48%; }
.woocommerce form .form-row-last { float: right; width: 48%; }
.woocommerce form .form-row-wide { clear: both; }
.woocommerce form .form-row::after { content: ""; display: block; clear: both; }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--danger); }

.woocommerce form.checkout h3 { font-size: 18px; border-bottom: 1px solid var(--border); padding-bottom: 0.4em; }

/* ==========================================================================
   4. Review order table
   ========================================================================== */
.woocommerce table.shop_table { border: 1px solid var(--border); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 0.7em 1em; }
.woocommerce table.shop_table .product-quantity { color: var(--text-light); }
.woocommerce table.shop_table tfoot th { font-weight: 700; }

/* Payment methods */
.woocommerce #payment { background: var(--bg-gray); border-radius: var(--radius); padding: 1.2em; }
.woocommerce #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; }
.woocommerce #payment ul.payment_methods li { padding: 6px 0; }
.woocommerce #payment div.payment_box { background: #fff; border-radius: var(--radius); padding: 0.9em 1em; margin: 0.6em 0; font-size: 13px; }

/* Product page: PayPal button width matches the product image (300px). */
.single-product .ppc-button-wrapper {
	width: 300px;
}

/* ==========================================================================
   5. My Account
   ========================================================================== */
.woocommerce-MyAccount-navigation {
	margin: 0 0 1.5em;
	padding: 10px 18px;
	background: var(--bg-gray);
	border-radius: var(--radius);
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.woocommerce-MyAccount-navigation li + li::before {
	content: "|";
	color: #ccc;
	margin: 0 12px;
}
.woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 4px 0;
	font-weight: 700;
	color: var(--text);
	border-bottom: 3px solid transparent;
}
.woocommerce-MyAccount-navigation li.is-active a {
	border-bottom-color: var(--primary);
	color: var(--primary);
}
.woocommerce-MyAccount-navigation li a:hover {
	text-decoration: none;
	color: var(--primary);
}
/* Log out is intentionally hidden (sits too close to Account details). */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	display: none;
}
.woocommerce-account .woocommerce-Address-title h3 { font-size: 18px; }

/* Login / register form */
.woocommerce-form-login, .woocommerce-form-register {
	background: var(--bg-gray);
	border-radius: var(--radius);
	padding: 1.5em;
	max-width: 420px;
}
.woocommerce-form-login .button, .woocommerce-form-register .button { width: 100%; }

/* ==========================================================================
   6. Notices / results
   ========================================================================== */
.woocommerce .woocommerce-result-count { font-size: 13px; color: var(--text-light); margin-bottom: 1em; }
.woocommerce .woocommerce-ordering select { padding: 0.4em 0.8em; }

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width: 767px) {
	.woocommerce div.product div.images,
	.woocommerce div.product .product-short-description { float: none; width: 100%; }
	ul.products li.product { width: 50%; }
	.woocommerce.columns-4 ul.products li.product { width: 50%; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
	.woocommerce div.product div.images { text-align: center; }
}