/* E-shop: product listing, product detail, cart and checkout. */

/* ---------- Listing ---------- */

/* template.css sets every .button to a fixed size with !important, so overrides here need it too. */

.woocommerce .woocommerce-result-count {
	font-size: 15px;
	line-height: 38px;
}

/* Space below the header band (the duplicate shop title that used to provide it is hidden). */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-top: 48px;
}

.woocommerce ul.products li.product .button {
	display: inline-block;
	width: 100%;
	max-width: 240px;
	margin: 8px 0 0 !important;
	padding: 4px 12px !important;
	white-space: nowrap;
}

.woocommerce ul.products li.product-category {
	text-align: center;
}

.woocommerce ul.products li.product-category a img {
	margin-left: auto;
	margin-right: auto;
}

/* Category tiles use the same title style as products. */
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
	font-size: 1.5em !important;
	font-weight: 400 !important;
}

.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title mark.count {
	display: none;
}

/* One column on phones: every second tile is floated right by WooCommerce and ends up off-centre. */
@media only screen and (max-width: 479px) {
	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- Product detail ---------- */

.woocommerce div.product div.summary .stock {
	margin-bottom: 0;
}

.woocommerce div.product form.cart table.variations {
	width: auto;
	margin: 20px 0 16px;
}

/* Bootstrap 3 styles .label as a white badge; WooCommerce renders the variation label as th.label. */
.woocommerce div.product form.cart table.variations th.label {
	display: table-cell;
	padding: 0 20px 0 0;
	border-radius: 0;
	background: none;
	color: #111;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.woocommerce div.product form.cart table.variations th.label label {
	margin: 0;
	font-weight: inherit;
}

.woocommerce div.product form.cart table.variations td.value {
	padding: 0;
	vertical-align: middle;
}

.woocommerce div.product form.cart .woocommerce-variation-price {
	padding-bottom: 4px;
}

/* Quantity and button side by side, same height. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}

.woocommerce div.product form.cart:not(.variations_form)::before,
.woocommerce div.product form.cart:not(.variations_form)::after,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart::before,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart::after {
	display: none;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

/* Products sold individually keep an empty quantity wrapper that would still take up a flex gap. */
.woocommerce div.product form.cart div.quantity:has(input[type="hidden"]) {
	display: none;
}

.woocommerce div.product form.cart div.quantity .qty {
	width: 72px;
	height: 44px;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	float: none;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 40px !important;
	line-height: 44px !important;
}

.woocommerce div.product .product_meta {
	margin-top: 24px;
	font-size: 15px;
	color: #666;
}

/* The SKU is an internal number, not useful to customers. */
.woocommerce div.product .product_meta .sku_wrapper {
	display: none !important;
}

.woocommerce div.product .custom-content p {
	margin-bottom: 1em;
}

@media only screen and (max-width: 767px) {
	.woocommerce div.product form.cart table.variations {
		margin-left: auto;
		margin-right: auto;
	}

	.woocommerce div.product form.cart:not(.variations_form),
	.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
		justify-content: center;
	}
}

/* ---------- Notices ---------- */

.woocommerce-info {
	border-top-color: #b5b280;
}

.woocommerce-info::before {
	color: #b5b280;
}

/* ---------- Checkout ---------- */

.woocommerce-checkout #payment {
	border: 1px solid #ddd;
	border-radius: 0;
	background: #fff;
}

.woocommerce-checkout #payment div.payment_box {
	background: #f4f3ec;
	color: #444;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #f4f3ec;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: #ddd;
}

/* The button label is long ("Objednávka zavazující k platbě") and must be able to wrap. */
.woocommerce #payment #place_order {
	height: auto !important;
	min-height: 48px;
	margin: 0 !important;
	padding: 12px 32px !important;
	line-height: 1.4 !important;
	white-space: normal;
}

.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
	font-size: 15px;
	line-height: 1.5;
}

#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 10px;
}

#ship-to-different-address label {
	padding-left: 0;
}

/* Bootstrap positions .checkbox inputs absolutely, which would put it under the text in the flex row. */
#ship-to-different-address input[type="checkbox"] {
	position: static;
	flex: none;
	margin: 0;
}

/* ---------- Mobile text size ---------- */

/* Shapely shrinks every paragraph to 12px below 768px, which makes descriptions hard to read. Applies site-wide. */
@media only screen and (max-width: 767px) {
	p {
		font-size: inherit;
	}

	.woocommerce div.product .custom-content p {
		font-size: 17px;
		line-height: 1.6;
	}

	.woocommerce-checkout #payment div.payment_box p {
		font-size: 15px;
		line-height: 1.5;
	}
}

/* ---------- Sticky header on small screens ---------- */

/* Shapely only pins the header from 992px up (via JS). Sticky keeps it in the flow, so nothing below it moves. */
@media only screen and (max-width: 991px) {
	header#masthead {
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	/* Anchored sections must not end up under the pinned header. */
	[id] {
		scroll-margin-top: 80px;
	}
}

/* The admin bar is fixed from 601px up; below that it scrolls away. */
@media only screen and (min-width: 601px) and (max-width: 782px) {
	.admin-bar header#masthead {
		top: 46px;
	}
}

@media only screen and (min-width: 783px) and (max-width: 991px) {
	.admin-bar header#masthead {
		top: 32px;
	}
}