/* The buy row of a product already in the cart: the stepper stands where the
   button stood, with the count beside it. Same furniture as the catalogue
   card, so the two pages say the same thing in the same way. */

.gsl-incart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	/* Inside the buy form's grid the panel is one more grid item. It takes
	   the button's own cell — empty once the button has stepped aside — so
	   the wishlist heart keeps the cell beside it and the two share a row
	   instead of the heart standing alone above (owner, 23.09.2026). Where
	   the form is not that grid, the area name simply does nothing. */
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--brand-action);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--brand-wash);
}

/* The skeleton is printed with «hidden» and shown by the script only when
   the cart holds this product. The row's own display would outrank the
   attribute's default — and did, on every page for every empty cart. */
.gsl-incart[hidden] {
	display: none;
}

/* WooCommerce's form stylesheet spans every child of form.cart across all
   columns at (0,3,1), which strips the columns off a plain «grid-area» and
   leaves the panel under the heart. The same chain the hiding rules use
   outweighs it. */
.woocommerce div.product form.cart > .gsl-incart {
	grid-area: buy;
}

/* The state above, the link below, one column on the left. */
.gsl-incart__words {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gsl-incart__line {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	min-width: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--brand-text);
}

.gsl-incart__mark {
	color: var(--wp--preset--color--in-stock);
}

/* The word carries the state — «Додано» for a moment after the tap, «У
   кошику» from then on — so it, and not the row, is what changes. */
.gsl-incart__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gsl-incart__qty {
	display: inline-flex;
	align-items: center;
	flex: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--base);
}

.gsl-incart__step {
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.gsl-incart__step:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-incart__value {
	width: 36px;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.gsl-incart__link {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--brand-text);
}

/* With the row in place the form's own controls would say the same thing
   twice, and the second one would be the louder.

   The selectors carry the whole WooCommerce chain because WooCommerce's own
   `.woocommerce div.product form.cart button.single_add_to_cart_button` sets
   `display: inline-block` and outranks anything shorter — the row appeared,
   the button stayed, and the buy area said both things at once. */
/* The label and the running total belong to the field; with the field gone
   they were two orphans above the row. */
.woocommerce div.product form.cart.is-in-cart .qty-label,
.woocommerce div.product form.cart.is-in-cart .qty-total,
.woocommerce div.product form.cart.is-in-cart .quantity,
.woocommerce div.product form.cart.is-in-cart button.single_add_to_cart_button,
.woocommerce div.product form.cart.is-in-cart button[name="add-to-cart"] {
	display: none;
}