/*
 * Ursa Prek: the shop (WooCommerce) in the site's style.
 *
 *  1. Colours WooCommerce uses for itself
 *  2. Shop page: the grid of items
 *  3. One item
 *  4. Buttons, fields and messages
 *  5. Cart, checkout and account
 *  6. "In the shop" under a project page
 */

/* ---------------------------------------------------------------- 1. Colours */

:root {
	--woocommerce: #ff8c00;
	--wc-primary: #ff8c00;
	--wc-primary-text: #ffffff;
	--wc-highlight: #ff8c00;
}

/* ---------------------------------------------------------------- 2. Shop page */

.up-shop,
.woocommerce-page .up-page {
	font-family: var(--up-text-font, var(--up-menu-font));
	color: var(--up-text-color, rgba(0, 0, 0, 0.7));
}
.up-shop .page-title,
.up-shop .product_title {
	margin: 0 0 28px;
	padding: 0;
	font-family: var(--up-menu-font) !important;
	font-size: clamp(26px, 2.4vw, 34px) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--up-orange) !important;
}
.up-shop .woocommerce-result-count,
.up-shop .woocommerce-ordering,
.up-shop .onsale {
	display: none;
}
.up-shop ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 32px;
	max-width: 1100px;
	margin: 0;
	padding: 0;
}
.up-shop ul.products::before,
.up-shop ul.products::after {
	display: none;
}
.up-shop ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.up-shop ul.products li.product a {
	text-decoration: none;
}
.up-shop ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin: 0 0 14px;
	object-fit: cover;
	transition: filter 0.3s ease;
}
/* in colour; the item you point at turns black and white, like the galleries (only where there is a mouse or
   trackpad) */
@media (hover: hover) and (pointer: fine) {
	.up-shop ul.products li.product:hover a img,
	.up-shop ul.products li.product a:focus-visible img,
	.up-shoplink__item:hover .up-shoplink__img,
	.up-shoplink__item:focus-visible .up-shoplink__img {
		filter: grayscale(1);
	}
}
.up-shop ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-family: var(--up-menu-font) !important;
	font-size: var(--up-menu-size) !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--up-ink-strong) !important;
	transition: color 0.18s ease;
}
.up-shop ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--up-orange) !important;
}
.up-shop ul.products li.product .price,
.up-shop div.product p.price,
.up-shop div.product span.price {
	display: block;
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 400;
	color: var(--up-ink);
}
.up-shop ul.products li.product .button {
	margin-top: 12px;
}
/* a category's page (the zines): the way back to the whole shop, above its name and text */
.up-shop-back {
	margin: 0 0 18px;
	font-family: var(--up-menu-font);
	font-size: var(--up-menu-size);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.up-main .up-shop .up-shop-back a {
	color: var(--up-ink);
	text-decoration: none;
	transition: color 0.18s ease;
}
.up-main .up-shop .up-shop-back a:hover,
.up-main .up-shop .up-shop-back a:focus-visible {
	color: var(--up-orange);
	text-decoration: none;
}
.up-shop .term-description {
	max-width: 760px;
	margin: -12px 0 36px;
}

/* ---------------------------------------------------------------- 3. One item */

.up-shop div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 20px 56px;
	max-width: 1100px;
}
/* WooCommerce floats the picture and the text at 48% each; here they are the two columns of the grid */
.ursaprek .up-shop div.product div.images,
.ursaprek .up-shop div.product div.summary {
	float: none !important;
	width: auto !important;
	margin: 0;
}
.ursaprek .up-shop div.product div.images img {
	display: block;
	width: 100%;
	height: auto;
}
.up-shop div.product .woocommerce-tabs,
.up-shop div.product .up-product-wide {
	grid-column: 1 / -1;
}
.up-shop div.product .product_title {
	margin-bottom: 10px;
}
.up-shop div.product p.price {
	margin: 0 0 22px;
	font-size: 20px;
	color: var(--up-ink-strong);
}
.up-shop div.product .woocommerce-product-details__short-description {
	margin-bottom: 26px;
}
.up-shop div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0 0 26px;
}
.up-shop div.product form.cart div.quantity {
	float: none;
	margin: 0;
}
.up-shop .quantity .qty {
	box-sizing: border-box;
	width: 72px;
	height: 100%;
	min-height: 44px;
	padding: 0 8px;
	border: 1px solid var(--up-rule);
	border-radius: 0;
	background: transparent;
	font: inherit;
	text-align: center;
	color: var(--up-ink-strong);
}
.up-shop div.product .stock {
	font-size: 14px;
	color: var(--up-ink);
}
.up-shop div.product .product_meta {
	padding-top: 16px;
	border-top: 1px solid var(--up-rule);
	font-size: 13px;
	color: var(--up-ink);
}
.up-shop div.product .product_meta > span {
	display: block;
}
.up-product-project {
	margin: 0 0 18px;
	padding: 0;
	font-size: 14px;
	color: var(--up-ink);
}
.up-shop a,
.up-shoplink a,
.up-product-project a {
	color: var(--up-orange);
	text-decoration: none;
}
.up-shop a:hover,
.up-product-project a:hover {
	text-decoration: underline;
}
.up-shop .woocommerce-tabs ul.tabs {
	margin: 28px 0 18px;
	padding: 0;
	border-bottom: 1px solid var(--up-rule);
}
.up-shop .woocommerce-tabs ul.tabs::before,
.up-shop .woocommerce-tabs ul.tabs li::before,
.up-shop .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.ursaprek .up-shop .woocommerce-tabs ul.tabs li,
.ursaprek .up-shop .woocommerce-tabs ul.tabs li.active {
	margin: 0 28px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}
.ursaprek .up-shop .woocommerce-tabs ul.tabs li a {
	padding: 10px 0;
	font-family: var(--up-menu-font);
	font-size: var(--up-menu-size);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--up-ink);
}
.up-shop .woocommerce-tabs ul.tabs li.active a,
.up-shop .woocommerce-tabs ul.tabs li a:hover {
	color: var(--up-orange);
	text-decoration: none;
}
.up-shop .woocommerce-tabs .panel {
	display: block;
	max-width: 760px;
}
.up-shop .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* an item with a choice (editions of a zine): the choices as a row of buttons, the price of the chosen one under it */
.up-shop div.product form.variations_form table.variations {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
	border-collapse: collapse;
}
.up-shop div.product form.variations_form table.variations tr,
.up-shop div.product form.variations_form table.variations th,
.up-shop div.product form.variations_form table.variations td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}
.up-shop div.product form.variations_form table.variations label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--up-menu-font);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--up-ink);
}
.up-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
}
.up-choice {
	box-sizing: border-box;
	min-width: 48px;
	padding: 9px 14px;
	border: 1px solid var(--up-rule);
	border-radius: 0;
	background: transparent;
	font-family: var(--up-menu-font);
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--up-ink-strong);
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.up-choice:hover,
.up-choice:focus-visible {
	border-color: var(--up-orange);
}
.up-choice.is-chosen {
	border-color: var(--up-orange);
	background: var(--up-orange);
	color: #ffffff;
}
.up-choice:disabled {
	opacity: 0.35;
	cursor: default;
	text-decoration: line-through;
}
/* the drop-down list itself stays in the page for the shop's own script, out of sight */
.up-choices + select.up-choices__list {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}
.up-shop div.product form.variations_form .reset_variations {
	display: none !important;
}
.up-shop div.product form.variations_form select {
	max-width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--up-rule);
	border-radius: 0;
	background-color: transparent;
	font: inherit;
	color: var(--up-ink-strong);
}
.up-shop div.product .woocommerce-variation-price {
	margin: 0 0 14px;
}
.up-shop div.product .woocommerce-variation-description p {
	margin: 0 0 12px;
}
.up-shop div.product .woocommerce-variation-availability p {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--up-ink);
}
.up-shop div.product .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
	opacity: 0.45;
	cursor: default;
}

/* ---------------------------------------------------------------- 4. Buttons, fields and messages */

.ursaprek .woocommerce a.button,
.ursaprek .woocommerce button.button,
.ursaprek .woocommerce input.button,
.ursaprek .up-shop .button,
.ursaprek .up-shop button.button.alt,
.ursaprek .wc-block-components-button:not(.is-link),
.ursaprek .wp-block-button__link {
	display: inline-block;
	box-sizing: border-box;
	padding: 12px 26px;
	border: 1px solid var(--up-orange);
	border-radius: 0;
	background: transparent;
	font-family: var(--up-menu-font);
	font-size: var(--up-menu-size);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--up-ink-strong);
	transition: background-color 0.18s ease, color 0.18s ease;
}
.ursaprek .woocommerce a.button:hover,
.ursaprek .woocommerce button.button:hover,
.ursaprek .woocommerce input.button:hover,
.ursaprek .up-shop .button:hover,
.ursaprek .up-shop button.button.alt:hover,
.ursaprek .wc-block-components-button:not(.is-link):hover,
.ursaprek .wp-block-button__link:hover,
.ursaprek .up-shop button.single_add_to_cart_button,
.ursaprek .wc-block-components-checkout-place-order-button,
.ursaprek .wc-block-cart__submit-button {
	background: var(--up-orange);
	color: #ffffff;
	text-decoration: none;
}
.ursaprek .up-shop button.single_add_to_cart_button:hover,
.ursaprek .wc-block-components-checkout-place-order-button:hover,
.ursaprek .wc-block-cart__submit-button:hover {
	background: var(--up-orange-deep);
	border-color: var(--up-orange-deep);
	color: #ffffff;
}
.ursaprek .woocommerce-message,
.ursaprek .woocommerce-info,
.ursaprek .woocommerce-error,
.ursaprek .wc-block-components-notice-banner {
	margin: 0 0 28px;
	padding: 14px 18px;
	border: 0;
	border-left: 2px solid var(--up-orange);
	border-radius: 0;
	background: rgba(255, 140, 0, 0.06);
	color: var(--up-ink-strong);
}
.ursaprek .woocommerce-message::before,
.ursaprek .woocommerce-info::before,
.ursaprek .woocommerce-error::before {
	display: none;
}
.ursaprek .woocommerce-message .button,
.ursaprek .woocommerce-info .button {
	float: right;
	margin: -6px 0 -6px 18px;
	padding: 8px 16px;
}

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

.woocommerce-cart .up-page,
.woocommerce-checkout .up-page,
.woocommerce-account .up-page {
	max-width: 1180px;
}
.ursaprek .wc-block-components-title,
.ursaprek .wc-block-cart-items__header,
.ursaprek .wc-block-components-totals-item__label,
.ursaprek .wp-block-woocommerce-cart h2,
.ursaprek .wp-block-woocommerce-checkout h2 {
	font-family: var(--up-menu-font) !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	color: var(--up-ink-strong) !important;
}
/* the headings of the checkout steps are small headings, not page titles */
.ursaprek .wp-block-woocommerce-checkout h2,
.ursaprek .wp-block-woocommerce-cart h2,
.ursaprek .wc-block-components-title.wc-block-components-title {
	font-size: 15px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--up-ink-strong) !important;
}
/* the same for the headings on the "order received" and account pages */
.ursaprek .up-main .woocommerce-order h2,
.ursaprek .up-main .woocommerce-MyAccount-content h2,
.ursaprek .up-main .woocommerce-customer-details h2,
.ursaprek .up-main .woocommerce-order-details h2 {
	margin: 30px 0 12px;
	font-family: var(--up-menu-font) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--up-ink-strong) !important;
}

/* WooCommerce's own fields set their heights for normal line spacing */
.ursaprek .wp-block-woocommerce-checkout,
.ursaprek .wp-block-woocommerce-cart {
	line-height: 1.5;
	letter-spacing: 0;
}
.ursaprek .wc-blocks-components-select__select,
.ursaprek .wc-block-components-text-input input,
.ursaprek .wc-blocks-components-select__label,
.ursaprek .wc-block-components-text-input label {
	line-height: normal !important;
	letter-spacing: 0 !important;
}
.ursaprek .wc-block-components-product-name,
.ursaprek .wc-block-components-product-name:link,
.ursaprek .wc-block-components-product-name:visited {
	font-family: var(--up-menu-font);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--up-ink-strong);
}
.ursaprek .wc-block-components-text-input input,
.ursaprek .wc-blocks-components-select__select,
.ursaprek .wc-block-components-textarea {
	border-radius: 0;
}
.ursaprek .wc-block-components-text-input input:focus,
.ursaprek .wc-block-components-textarea:focus {
	box-shadow: 0 0 0 1px var(--up-orange);
	border-color: var(--up-orange);
}
.ursaprek .wc-block-components-checkbox .wc-block-components-checkbox__input:checked {
	border-color: var(--up-orange);
}

/* ---------------------------------------------------------------- 6. "In the shop" under a project page */

.up-shoplink {
	clear: both;
	margin: 56px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--up-rule);
}
/* in line with the text above it (Elementor keeps text 10px inside its columns) */
.up-page--inset > .up-shoplink {
	margin-left: 10px;
	margin-right: 10px;
}
.up-main > .up-shoplink,
.up-main > .elementor ~ .up-shoplink {
	margin-left: calc(var(--up-inset) + 10px);
	margin-right: calc(var(--up-inset) + 10px);
	margin-bottom: 56px;
}
.up-shoplink .up-shoplink__title {
	margin: 0 0 18px;
	padding: 0;
	font-family: var(--up-menu-font) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--up-orange) !important;
}
.up-shoplink__list {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.up-shoplink__list li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.up-shoplink__item {
	display: grid;
	grid-template-columns: 92px auto;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-content: center;
	text-decoration: none;
}
.up-shoplink__item .up-shoplink__img,
.up-shoplink__item img {
	grid-row: 1 / 3;
	display: block;
	width: 92px;
	height: 92px;
	margin: 0;
	object-fit: cover;
	transition: filter 0.3s ease;
}
.up-shoplink__name {
	align-self: end;
	font-family: var(--up-menu-font);
	font-size: var(--up-menu-size);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--up-ink-strong);
	transition: color 0.18s ease;
}
.up-shoplink__item:hover .up-shoplink__name {
	color: var(--up-orange);
}
.up-shoplink__price {
	align-self: start;
	font-size: 14px;
	color: var(--up-ink);
}

@media (max-width: 860px) {
	.up-shop ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 16px;
	}
	/* WooCommerce's own phone rules give an item 48% of its place and float it; in this grid an item fills its cell */
	.ursaprek .up-shop ul.products li.product {
		float: none !important;
		clear: none !important;
		width: 100% !important;
		margin: 0 !important;
	}
	.up-shop div.product {
		grid-template-columns: minmax(0, 1fr);
	}
	.up-main > .up-shoplink,
	.up-main > .elementor ~ .up-shoplink {
		margin-left: 20px;
		margin-right: 20px;
	}
	.up-page--inset > .up-shoplink {
		margin-left: 10px;
		margin-right: 10px;
	}
}

/* a phone: two items in a row are narrow, so names stay whole words and the button stays on one line */
@media (max-width: 560px) {
	.up-shop ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px !important;
		letter-spacing: 0.02em !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
	}
	.ursaprek .up-shop ul.products li.product .button {
		display: block;
		padding: 10px 4px;
		font-size: 12px;
		letter-spacing: 0.03em;
		text-align: center;
		white-space: nowrap;
	}
}

/* the line above the cart and the checkout (where the shop delivers, how to pay) and the one under the checkout */
.up-shop-terms {
	max-width: 760px;
	margin: 0 0 26px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--up-ink-strong);
}
.up-shop-terms a {
	color: var(--up-orange-deep);
	white-space: nowrap;
}
.up-shop-terms--after {
	margin: 18px 0 0;
}