/**
 * WooCommerce styles.
 *
 * Loaded only on shop, product, cart, checkout and account views.
 */

/* --------------------------------------------------------------------------
   Buttons
   WooCommerce's own .woocommerce a.button rules carry an extra element
   selector, so they outrank the theme's plain .button. Matching its selectors
   here keeps the theme's look across the shop, cart, checkout and account.
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .cart input.button {
	padding: .7rem 1.4rem;
	background-color: var(--button-bg);
	border: 1px solid var(--button-bg);
	border-radius: var(--button-radius);
	color: var(--button-text);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .cart .button:hover,
.woocommerce .cart input.button:hover {
	background-color: var(--button-hover-bg);
	border-color: var(--button-hover-bg);
	color: var(--button-hover-text);
}

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

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

.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	background-color: var(--color-bg-alt);
	border-color: var(--color-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Shop loop
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	/* WooCommerce puts a columns-N class on the list from the loop_shop_columns
	   filter, which the Customizer drives. */
	grid-template-columns: repeat(var(--shop-cols, 3), minmax(0, 1fr));
	gap: 1.75rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

/* The Customizer setting drives desktop only. These live inside a desktop
   media query on purpose: a bare .columns-3 rule is one class more specific
   than the plain .woocommerce ul.products used below, so it would otherwise
   keep winning on tablet and phone and the fixed counts would never apply. */
@media (min-width: 1025px) {
	.woocommerce ul.products.columns-2 { --shop-cols: 2; }
	.woocommerce ul.products.columns-3 { --shop-cols: 3; }
	.woocommerce ul.products.columns-4 { --shop-cols: 4; }
	.woocommerce ul.products.columns-5 { --shop-cols: 5; }
	.woocommerce ul.products.columns-6 { --shop-cols: 6; }
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--shop-cols: 2;
	}
}

@media (max-width: 600px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--shop-cols: 1;
	}
}

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

.woocommerce ul.products li.product {
	float: none;
	width: 100% !important;
	margin: 0 !important;
	padding-bottom: 1.25rem;
	text-align: center;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	text-decoration: none;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	margin: 0 0 .9rem;
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 1rem .35rem;
	padding: 0;
	color: var(--color-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.woocommerce ul.products li.product .price {
	margin: 0 1rem .9rem;
	color: #3f8ca7;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.woocommerce ul.products li.product .price del {
	color: var(--color-text-muted);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0 auto .5rem;
	color: #00aab5;
}

/* The empty part of the rating, tinted to match the filled stars. */
.woocommerce ul.products li.product .star-rating::before {
	color: rgba(0, 170, 181, .3);
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: 0 1rem;
}

.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	margin-top: .5rem;
	font-size: .82rem;
	font-weight: 600;
}

/* Sale badge */
.woocommerce span.onsale {
	top: .85rem;
	left: .85rem;
	right: auto;
	min-height: 0;
	min-width: 0;
	padding: .3rem .7rem;
	background: var(--color-accent);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 1.5rem;
	color: var(--color-text-muted);
	font-size: .9rem;
}

.woocommerce .woocommerce-ordering select {
	width: auto;
}

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
	float: none;
	width: 100% !important;
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border-radius: var(--radius);
	overflow: hidden;
}

.woocommerce div.product .product_title {
	margin-bottom: .5rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--color-primary-dark);
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--color-text-muted);
	margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-end;
	margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart .quantity input {
	width: 5rem;
	text-align: center;
}

.woocommerce div.product .product_meta {
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: .85rem;
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: .3rem;
}

/* --------------------------------------------------------------------------
   Single product tabs
   The title strip and the panel below it form one bordered card, with a tinted
   title bar. WooCommerce's default tab styling draws an underline plus little
   arrow shapes; both are cleared first.
   -------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 2rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: .55rem .6rem 0;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .7rem 1.15rem;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	color: var(--color-text-muted);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus {
	background: rgba(255, 255, 255, .7);
	color: var(--color-heading);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 1.75rem;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
}

.woocommerce div.product .woocommerce-tabs .panel > *:first-child {
	margin-top: 0;
}

.woocommerce div.product .woocommerce-tabs .panel > *:last-child {
	margin-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	margin-bottom: .85rem;
	font-size: 1.25rem;
}

/* WooCommerce repeats the tab label as a heading inside this one panel. */
.woocommerce div.product .woocommerce-tabs #tab-additional_information > h2:first-child {
	display: none;
}

/* The attributes table sits on the tinted panel, so drop the content-table
   chrome the theme applies by default. */
.woocommerce div.product .woocommerce-tabs .shop_attributes {
	margin: 0;
	border: 0;
}

.woocommerce div.product .woocommerce-tabs .shop_attributes th,
.woocommerce div.product .woocommerce-tabs .shop_attributes td {
	padding: .6rem .85rem .6rem 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs .shop_attributes th {
	width: 1%;
	padding-right: 1.5rem;
	white-space: nowrap;
	color: var(--color-heading);
}

.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	grid-column: 1 / -1;
	margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Cart, checkout and account
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--color-bg-alt);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

.woocommerce .cart-collaterals .cart_totals {
	width: 100%;
}

.woocommerce .cart_totals h2,
.woocommerce #order_review_heading,
.woocommerce #customer_details h3 {
	font-size: 1.15rem;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce .woocommerce-form-login {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.woocommerce #payment {
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

.woocommerce #payment div.payment_box {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
}

.woocommerce #payment div.payment_box::before {
	display: none;
}

/* --------------------------------------------------------------------------
   My Account
   The account shortcode renders through page.php, so the band above it and the
   full-width container are the page's. Everything here is scoped to
   .kamagra-account, which inc/woocommerce.php adds both on the page assigned in
   WooCommerce and on any page carrying [woocommerce_my_account] — a separate
   Login or Register page included.
   -------------------------------------------------------------------------- */

.kamagra-account .entry-content:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	align-items: start;
	gap: 2rem;
}

.kamagra-account .woocommerce-MyAccount-navigation,
.kamagra-account .woocommerce-MyAccount-content {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.kamagra-account .woocommerce-MyAccount-navigation {
	overflow: hidden;
}

.kamagra-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kamagra-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}

.kamagra-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.kamagra-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: .8rem 1.15rem;
	border-left: 3px solid transparent;
	color: var(--color-text);
	font-size: .95rem;
	font-weight: 500;
	transition: background-color var(--transition), color var(--transition);
}

.kamagra-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--color-bg-alt);
	color: var(--color-primary);
}

.kamagra-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--color-primary-light);
	border-left-color: var(--color-primary);
	color: var(--color-primary);
	font-weight: 600;
}

.kamagra-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--color-text-muted);
}

.kamagra-account .woocommerce-MyAccount-content {
	padding: clamp(1.5rem, 3vw, 2rem);
}

.kamagra-account .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

.kamagra-account .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

.kamagra-account .woocommerce-MyAccount-content h2 {
	margin-top: 0;
	font-size: 1.25rem;
}

.kamagra-account .woocommerce-MyAccount-content h2,
.kamagra-account .woocommerce-MyAccount-content h3 {
	margin-bottom: .75rem;
}

.kamagra-account .woocommerce-MyAccount-content h3 {
	font-size: 1.05rem;
}

/* Address cards. The col2-set clearfix pseudos would otherwise become grid
   items and shift the first card into a row of its own. WooCommerce styles the
   cards themselves through its own col-1 / col-2 classes in a compiled rule
   with three class selectors (`.woocommerce .col2-set .col-1` sets width 48%),
   so these selectors have to carry a fourth to beat it whatever the stylesheet
   order — a two-class rule left the card half its column with the edit link
   hanging outside it. */
.kamagra-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.kamagra-account .woocommerce-Addresses.col2-set::before,
.kamagra-account .woocommerce-Addresses.col2-set::after {
	display: none;
}

.kamagra-account .woocommerce-Addresses.col2-set > .woocommerce-Address {
	float: none;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 1.25rem;
}

/* The heading and the add/edit link share one row while there is room and stack
   when there is not; the link keeps itself to the right in both states. */
.kamagra-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: start;
	gap: .25rem 1rem;
	margin-bottom: .75rem;
}

.woocommerce-account .addresses .title::after, .woocommerce-account .addresses .title::before{
	display: none;
}

.kamagra-account .woocommerce-Address-title .edit{
	margin-left: 0 !important;
}

.kamagra-account .woocommerce-Address-title h2,
.kamagra-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.05rem;
}

.kamagra-account .woocommerce-Address-title .edit {
	margin-left: auto;
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
}

.kamagra-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: 1.7;
}

/* Account forms: full-width rows, whichever WooCommerce layout the endpoint
   uses, and a card that holds the whole form rather than its border alone. */
.kamagra-account form .form-row {
	float: none;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
}

.kamagra-account form .form-row label {
	display: block;
	margin-bottom: .35rem;
}

.kamagra-account .woocommerce-EditAccountForm fieldset {
	margin: 1.75rem 0 0;
	padding: 0;
	border: 0;
}

.kamagra-account .woocommerce-EditAccountForm legend {
	width: 100%;
	margin-bottom: .75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--color-border);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--color-heading);
}

/* Login, register and lost-password forms. */
.kamagra-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 2rem;
	max-width: 960px;
	margin-inline: auto;
}

.kamagra-account #customer_login::before,
.kamagra-account #customer_login::after {
	display: none;
}

.kamagra-account #customer_login > .u-column1,
.kamagra-account #customer_login > .u-column2 {
	float: none;
	width: auto;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.5rem, 3vw, 2rem);
}

/* The card border belongs to the column, not to the form inside it. */
.kamagra-account #customer_login .woocommerce-form-login,
.kamagra-account #customer_login .woocommerce-form-register {
	border: 0;
	padding: 0;
}

.kamagra-account #customer_login h2 {
	margin: 0 0 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-border);
	font-size: 1.35rem;
}

.kamagra-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-bottom: .9rem;
	font-weight: 400;
	color: var(--color-text);
	cursor: pointer;
}

.kamagra-account .woocommerce-form-login__submit,
.kamagra-account .woocommerce-form-register__submit,
.kamagra-account .woocommerce-ResetPassword button[type="submit"] {
	display: block;
	width: 100%;
	margin-top: .25rem;
}

.kamagra-account .lost_password {
	margin: .9rem 0 0;
	text-align: center;
	font-size: .9rem;
}

.kamagra-account .password-input {
	position: relative;
	display: block;
}

.kamagra-account .password-input .input-text {
	padding-right: 2.75rem;
}

.kamagra-account:not(.logged-in) .content-area{
	max-width: 600px;
	margin: 0 auto;
}

/* A login or reset form with no register column beside it reads better narrow
   and centred than as a 1200px field. */
.kamagra-account .entry-content > .woocommerce-form-login,
.kamagra-account .entry-content > .woocommerce-ResetPassword {
	max-width: 460px;
	margin-inline: auto;
	padding: clamp(1.5rem, 3vw, 2rem);
}

@media (max-width: 1024px) {
	.kamagra-account .entry-content:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
	}

	.kamagra-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.kamagra-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
		border-right: 1px solid var(--color-border);
		border-bottom: 0;
	}

	.kamagra-account .woocommerce-MyAccount-navigation li:last-child {
		border-right: 0;
	}

	.kamagra-account .woocommerce-MyAccount-navigation a {
		border-left: 0;
		border-bottom: 3px solid transparent;
		padding: .7rem 1rem;
		white-space: nowrap;
	}

	.kamagra-account .woocommerce-MyAccount-navigation li.is-active a {
		border-bottom-color: var(--color-primary);
	}
}

@media (max-width: 600px) {
	.kamagra-account #customer_login,
	.kamagra-account .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	.kamagra-account .woocommerce-MyAccount-content {
		padding: 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   Notices and messages
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem !important;
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-sm);
	background: var(--color-primary-light);
	color: var(--color-text);
	list-style: none;
}

.woocommerce-message,
.woocommerce-info {
	padding-right: 1.25rem !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-error {
	border-left-color: var(--color-danger);
	background: #fef2f2;
}

.woocommerce-message {
	border-left-color: var(--color-accent);
	background: #f0fdf4;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: .75rem;
}

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: 1.5rem;
	color: var(--color-text-muted);
	font-size: .85rem;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Single product price
   Scoped to the product summary, which holds the display price and the
   variation price above the add to cart button — and nothing else. The shop
   loop, cart, checkout, order tables and slide-out cart keep their own sizing.
   -------------------------------------------------------------------------- */

.woocommerce div.product .summary .woocommerce-Price-amount {
	font-size: 20px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Add to cart and Select options buttons
   The gradient comes from the Shop Buttons section of the Customizer. These
   selectors carry more weight than the generic .woocommerce a.button rules
   above, so they win without needing !important.
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
	background-color: transparent;
	background-image: linear-gradient(
		var(--kamagra-btn-grad-angle, 90deg),
		var(--kamagra-btn-grad-from, #000000) 0%,
		var(--kamagra-btn-grad-to, #509cb6) 100%
	);
	border-color: var(--kamagra-btn-grad-to, #509cb6);
	color: var(--kamagra-btn-text, #ffffff);
	font-weight: 600;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .button:focus {
	background-color: transparent;
	background-image: linear-gradient(
		var(--kamagra-btn-grad-angle, 90deg),
		var(--kamagra-btn-grad-from, #000000) 0%,
		var(--kamagra-btn-grad-to, #509cb6) 100%
	);
	border-color: var(--kamagra-btn-grad-to, #509cb6);
	color: var(--kamagra-btn-text, #ffffff);
	filter: brightness(1.12);
}

/* Loading: a ring in the button's own text colour. WooCommerce draws its
   loader from an icon font in the top-right corner and drops the button to a
   quarter opacity; this sits inline beside the label instead. Trunk draws its
   loader on ::before and older builds on ::after, so both are cleared and a
   single ring is drawn on ::after. */
.woocommerce ul.products li.product .button.loading,
.woocommerce div.product form.cart .single_add_to_cart_button.loading,
.woocommerce div.product form.cart .button.loading {
	opacity: .75;
	padding-right: 1.4rem;
	cursor: wait;
}

.woocommerce ul.products li.product .button.loading::before,
.woocommerce div.product form.cart .single_add_to_cart_button.loading::before,
.woocommerce div.product form.cart .button.loading::before {
	content: none;
}

.woocommerce ul.products li.product .button.loading::after,
.woocommerce div.product form.cart .single_add_to_cart_button.loading::after,
.woocommerce div.product form.cart .button.loading::after {
	content: "";
	position: static;
	display: inline-block;
	width: 14px;
	height: 14px;
	/* The theme's .button is a flex row with its own gap, so the ring needs no
	   margin of its own; one would double the space before the label. */
	margin: 0;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	background: none;
	animation: kamagra-spin .7s linear infinite;
}

/* The "added" tick WooCommerce appends after a successful add. */
.woocommerce ul.products li.product .button.added::after {
	color: var(--kamagra-btn-text, #ffffff);
}

/* The "View cart" link WooCommerce appends after an AJAX add. */
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce div.product form.cart a.added_to_cart {
	margin-left: .75rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Variable product options
   WooCommerce lays the variation picker out as a table. The theme's base
   table styles — grey header cells, borders, cell padding — are meant for
   content tables and leak into it, so the picker is reset here. The label
   column also needs its own gap; without one the select sits flush against it.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart .variations {
	margin: 0 0 1.25rem;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	padding: 0;
	background: none;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.woocommerce div.product form.cart .variations tr + tr > * {
	padding-top: .75rem;
}

.woocommerce div.product form.cart .variations th.label {
	width: 1%;
	padding-right: 1.25rem;
	background: none;
	white-space: nowrap;
}

.woocommerce div.product form.cart .variations th.label label {
	margin: 0;
	color: var(--color-heading);
	font-weight: 600;
}

.woocommerce div.product form.cart .variations td.value select {
	width: 100%;
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: .4rem;
	font-size: .85rem;
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Shop page heading
   -------------------------------------------------------------------------- */

.shop-heading {
	padding-block: 10px;
	background-color: var(--color-bg-alt);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.shop-heading .woocommerce-breadcrumb,
.shop-heading .woocommerce-breadcrumb a {
	color: var(--color-heading);
}

.shop-heading .woocommerce-breadcrumb {
	margin: 0 0 .25rem;
	font-size: .9rem;
}

.shop-heading .woocommerce-breadcrumb a:hover,
.shop-heading .woocommerce-breadcrumb a:focus {
	color: var(--color-primary);
}

.shop-heading__sep {
	margin-inline: .4rem;
}

.shop-heading__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
}

@media (max-width: 1024px) {
	.shop-heading__title {
		font-size: 28px;
	}
}

@media (max-width: 600px) {
	.shop-heading__title {
		font-size: 24px;
	}
}

/* --------------------------------------------------------------------------
   Archive description, below the loop
   -------------------------------------------------------------------------- */

.shop-archive-description {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.shop-archive-description > *:first-child {
	margin-top: 0;
}

.shop-archive-description > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Shop toolbar
   Notices, the result count and the ordering dropdown on one row above the
   sidebar and the loop, so they span the container even when a sidebar shows.
   -------------------------------------------------------------------------- */

.shop-toolbar {
	padding-block: 1rem;
}

.shop-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: .9rem;
}

.shop-toolbar .woocommerce-ordering {
	margin: 0;
}

.shop-toolbar .woocommerce-ordering select {
	width: auto;
}

/* --------------------------------------------------------------------------
   Shop layout
   The sidebar takes 20% on the left, but the product column stays first in
   the markup so a screen reader reaches the products before the widgets.
   -------------------------------------------------------------------------- */

.content-area--shop.has-sidebar {
	grid-template-columns: 20% minmax(0, 1fr);
	gap: 24px;
}

.content-area--shop.has-sidebar .site-main {
	grid-column: 2;
	grid-row: 1;
}

.content-area--shop.has-sidebar .widget-area {
	grid-column: 1;
	grid-row: 1;
}

.content-area--shop:not(.has-sidebar) .site-main {
	grid-column: 1 / -1;
}

@media (max-width: 1024px) {
	.content-area--shop.has-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.content-area--shop.has-sidebar .site-main,
	.content-area--shop.has-sidebar .widget-area {
		grid-column: 1;
		grid-row: auto;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr);
	}
}