/*
 * WooCommerce, on the theme's own grid.
 *
 * inc/woocommerce.php removes woocommerce-layout.css and woocommerce-smallscreen
 * .css before this file loads. That stylesheet is written for floats —
 * `ul.products li.product { width: 22.05%; float: left }` — and it outranks a
 * two-class grid rule, which is why a grid put on top of it collapses. With it
 * gone, this file can be a plain grid and the card is the one inc/woocommerce.php
 * assembles from hooks.
 *
 * The shop keeps the front page's grammar: plates at a fixed ratio, a hairline
 * between the name and everything above it, prices in tabular figures, and
 * boxes only where a box is doing work (the totals, the notices). A catalogue of
 * coffee reads better as ruled stock than as a wall of cards.
 */

/* -------------------------------------------------------------------------
   The shop
   ------------------------------------------------------------------------- */

/*
 * Bottom only, and the missing top padding is the point.
 *
 * This wrapper is opened by meridian_coffee_woo_wrapper_start() and the shop's
 * page head is printed inside it a moment later, so a padding-top here is a
 * second helping of the exact gap the head has already asked for: 112px of
 * nothing above the title instead of 56. The head owns the top of the page
 * (see .me-page-head in base.css); this wrapper owns the breathing room after
 * the grid.
 */
.woocommerce .me-shop {
	padding-bottom: var(--me-section);
}

.me-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.5rem;
	padding-bottom: 0.9rem;
	border-bottom: var(--me-rule) solid var(--me-line);
}

/*
 * The notices wrapper is always printed, empty, as the toolbar's first child.
 * Left inline it takes the left end of a space-between row and pushes the
 * result count into the middle of the page, where it reads as a heading for
 * nothing. Given a full row of its own, the count and the sort control are the
 * only two items left and land at the two ends, which is where they belong.
 */
.me-shop__toolbar .woocommerce-notices-wrapper {
	flex-basis: 100%;
}

.me-shop__toolbar .woocommerce-result-count,
.me-shop__toolbar .woocommerce-ordering {
	margin: 0;
	float: none;
}

.me-shop__toolbar .woocommerce-result-count {
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

.me-shop__toolbar .woocommerce-ordering select {
	padding: 0.55rem 0.85rem;
	background: var(--me-surface);
	border: var(--me-rule) solid var(--me-line);
	border-radius: var(--me-radius);
	font-size: var(--me-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

ul.products {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * WooCommerce's own clearfix, neutralised — and this one matters.
 *
 * `.woocommerce ul.products::before, .woocommerce ul.products::after { content:
 * " "; display: table }` clears the floats the layout stylesheet used to set.
 * That stylesheet is dequeued (see inc/woocommerce.php), but the clearfix lives
 * on in woocommerce-general.css — and a pseudo-element with display:table is a
 * grid item. The grid therefore gains one empty cell in front of the first
 * product and one after the last, which pushes every card one column to the
 * right and leaves the first cell of the first row blank. It reads as a styling
 * mistake in the theme rather than as a leftover in the plugin, which is why it
 * is worth two rules.
 *
 * The `.woocommerce` prefix is not decoration: the plugin's selector is
 * `.woocommerce ul.products::before`, and a bare `ul.products::before` loses to
 * it on specificity no matter where it sits in the cascade.
 */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

/*
 * WooCommerce's own brand colours, dropped.
 *
 * The plugin ships a purple for its action buttons and a green for prices, both
 * set on selectors specific enough (`.woocommerce button.button.alt`) that a
 * two-class theme rule cannot reach them. Leaving them in means one purple
 * button and seven green prices on a page that is otherwise four neutral tones
 * and one accent — and the client cannot fix it from the Customizer, because it
 * is not the theme's colour to change.
 */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .woocommerce-Price-amount {
	color: var(--me-ink);
}

.woocommerce .woocommerce-Price-amount del,
.woocommerce .price del {
	color: var(--me-muted);
}

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

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

/*
 * The product tabs, rebuilt.
 *
 * WooCommerce gives each tab an inset panel with a rounded corner and an arrow,
 * drawn with ::before and ::after on the active item. The rule under the row is
 * already the theme's, so the boxes are removed rather than restyled: on this
 * page the tabs are two words in the same uppercase tracking as every other
 * label.
 */
.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 {
	display: none;
}

.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 {
	padding: 0;
	background: none;
	color: var(--me-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--me-accent);
}

.woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
}

.woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* SKU, categories and tags under the add-to-cart button. */
.product_meta {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: var(--me-rule) solid var(--me-line);
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	letter-spacing: 0.04em;
}

.product_meta > span {
	display: block;
	margin-bottom: 0.35rem;
}

.product_meta a {
	color: var(--me-ink-soft);
	text-decoration: none;
}

.product_meta a:hover {
	color: var(--me-accent);
}

ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding-top: 1rem;
	border-top: var(--me-rule) solid var(--me-line);
}

/* -------------------------------------------------------------------------
   The card
   ------------------------------------------------------------------------- */

.me-card {
	display: block;
}

/*
 * One grid for the whole card: the plate spans both columns, the name sits
 * left and the price right on the next row, and the button takes a row of its
 * own. Everything the card shows is placed by grid line, so nothing depends on
 * the order WooCommerce happens to print its hooks in.
 */
.me-card__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.85rem 1rem;
	align-items: baseline;
}

.me-card__media {
	grid-column: 1 / -1;
}

.me-card__meta {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: var(--me-rule) solid var(--me-line);
}

.me-card__title {
	margin: 0;
	font-family: var(--me-font-sans);
	font-size: var(--me-text-base);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
}

.me-card__price {
	color: var(--me-ink);
	font-size: var(--me-text-sm);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.me-card__price del {
	color: var(--me-muted);
}

.me-card__price ins {
	text-decoration: none;
}

/*
 * Add to bag is a tracked rule, not a button: twelve boxed buttons in a grid is
 * twelve boxes competing with twelve photographs. It gains its underline on
 * hover, and keyboard focus reaches it the same way it reaches the card link,
 * so nothing is hover-only.
 */
ul.products li.product .button,
ul.products li.product .added_to_cart {
	grid-column: 1 / -1;
	justify-self: start;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--me-ink);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
	background-image: linear-gradient(var(--me-accent), var(--me-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: color var(--me-speed-fast) var(--me-ease), background-size var(--me-speed) var(--me-ease-enter);
}

ul.products li.product:hover .button,
ul.products li.product .button:focus-visible {
	background-size: 100% 1px;
	color: var(--me-accent);
}

ul.products li.product .added_to_cart {
	color: var(--me-muted);
	background-size: 100% 1px;
	background-image: linear-gradient(var(--me-line), var(--me-line));
}

ul.products li.product .onsale {
	position: absolute;
	z-index: 2;
	margin: 0.75rem;
	padding: 0.3rem 0.6rem;
	background: var(--me-ink);
	color: var(--me-bg);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

ul.products li.product img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

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

/*
 * A single product has no page head — the product's own title is the h1 — so
 * unlike the wrapper above, this one does have to hold the top of the page up.
 * It asks for the same gap every page head asks for rather than a section gap,
 * which is what keeps a product page opening at the same height as the shop it
 * was reached from.
 */
.single-product .me-wrap {
	padding-block: var(--me-head-pad) var(--me-section);
}

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 4.5rem);
	align-items: start;
}

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

/* The summary follows the reader down a long gallery, then stops. */
.single-product .summary {
	position: sticky;
	top: 6.5rem;
}

.summary .product_title {
	margin-bottom: 0.35em;
}

.summary .price {
	display: block;
	margin-bottom: 1.2em;
	padding-bottom: 1.2em;
	border-bottom: var(--me-rule) solid var(--me-line);
	color: var(--me-ink);
	font-size: var(--me-text-xl);
	font-variant-numeric: tabular-nums;
}

.summary .woocommerce-product-details__short-description {
	color: var(--me-muted);
}

.single-product .quantity input {
	width: 84px;
	padding: 0.75rem 0.85rem;
	background: var(--me-surface);
	border: var(--me-rule) solid var(--me-line);
	border-radius: var(--me-radius);
}

.single-product .single_add_to_cart_button {
	padding: 1rem 1.75rem;
	background: var(--me-ink);
	border: var(--me-rule) solid var(--me-ink);
	border-radius: var(--me-radius);
	color: var(--me-bg);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

.single-product .single_add_to_cart_button:hover {
	background: var(--me-accent);
	border-color: var(--me-accent);
	color: var(--me-surface);
}

/* A specification table, set like the rest of the page's data. */
.shop_attributes {
	width: 100%;
	margin-top: 1.5rem;
	border-collapse: collapse;
}

.shop_attributes th,
.shop_attributes td {
	padding: 0.6rem 0;
	border-bottom: var(--me-rule) solid var(--me-line);
	text-align: start;
	font-size: var(--me-text-sm);
}

.shop_attributes th {
	color: var(--me-muted);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--me-text-xs);
}

.shop_attributes td {
	color: var(--me-ink);
}

.shop_attributes td p {
	margin: 0;
}

.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--me-section-sm);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 0 0 1.75rem;
	padding: 0 0 1rem;
	border-bottom: var(--me-rule) solid var(--me-line);
}

.woocommerce-tabs ul.tabs a {
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--me-accent);
}

.related.products,
.upsells.products {
	grid-column: 1 / -1;
	margin-top: var(--me-section);
}

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

/*
 * The three utility pages used to give every one of their wrappers a full
 * section gap top and bottom, which put space in two places nobody asked for.
 *
 * Above: the page head inside the first wrapper already carries the opening
 * gap, so this was the same stacking fault as the shop's. Below: these pages
 * have two wrappers, the head in one and the form in the other, so the padding
 * landed between the title and the thing the title names — about 120px of
 * blank between the word "Cart" and the cart.
 *
 * Nothing replaces it. The space between the head and the form is
 * `--me-head-gap`, declared once, and the space at the foot of the page is the
 * footer's own padding-top, which every page already has.
 */
.woocommerce-cart .me-page-head__title,
.woocommerce-checkout .me-page-head__title,
.woocommerce-account .me-page-head__title {
	font-size: var(--me-text-page-sm);
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: var(--me-rule) solid var(--me-line);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.9rem 1rem;
	border-bottom: var(--me-rule) solid var(--me-line);
	text-align: start;
}

.woocommerce table.shop_table th {
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	padding: 1.5rem;
	background: var(--me-surface);
	border: var(--me-rule) solid var(--me-line);
}

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	padding: 0.8rem 0.9rem;
	background: var(--me-surface);
	border: var(--me-rule) solid var(--me-line);
	border-radius: var(--me-radius);
}

/*
 * Notices get a left rule rather than a top one: at the top of a cart page the
 * message should read as a marginal annotation on the order, not as a banner
 * across it.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--me-surface);
	border-left: 3px solid var(--me-accent);
	list-style: none;
}

.woocommerce-error {
	border-left-color: #b3261e;
}

.woocommerce .button {
	padding: 0.85rem 1.5rem;
	background: var(--me-ink);
	border: var(--me-rule) solid var(--me-ink);
	border-radius: var(--me-radius);
	color: var(--me-bg);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce .button:hover {
	background: var(--me-accent);
	border-color: var(--me-accent);
	color: var(--me-surface);
}

/* -------------------------------------------------------------------------
   WooCommerce Blocks: the cart, the checkout and the product grid
   ------------------------------------------------------------------------- */

/*
 * WooCommerce's own front end is the block cart and the block checkout now, and
 * a theme that styles only the classic templates ships a designed shop with a
 * default-looking cart beside it. This is a bounded pass over the components
 * those two pages actually render — buttons, fields, the item table, the
 * cross-sell grid — rather than an attempt to re-skin the whole block library:
 * everything below is either a class WooCommerce has kept stable across
 * versions or a layout the theme already owns elsewhere.
 */

.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-grid__product {
	margin: 0;
	padding-top: 1rem;
	border-top: var(--me-rule) solid var(--me-line);
	text-align: start;
}

.wc-block-grid__product-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.wc-block-grid__product-title {
	margin-top: 0.9rem;
	color: var(--me-ink);
	font-family: var(--me-font-sans);
	font-size: var(--me-text-sm);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.35;
}

.wc-block-grid__product-link {
	text-decoration: none;
}

.wc-block-grid__product-price {
	color: var(--me-ink);
	font-size: var(--me-text-sm);
	font-variant-numeric: tabular-nums;
}

.wc-block-grid__product-price del {
	color: var(--me-muted);
}

.wc-block-grid__product-price ins {
	text-decoration: none;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart .added_to_cart {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.7rem 1.2rem;
	background: var(--me-ink);
	border: var(--me-rule) solid var(--me-ink);
	border-radius: var(--me-radius);
	color: var(--me-bg);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--me-accent);
	border-color: var(--me-accent);
	color: var(--me-surface);
}

.wc-block-grid__product-add-to-cart .added_to_cart {
	background: none;
	color: var(--me-muted);
	border-color: var(--me-line);
}

/* Cart and checkout headings read as the rest of the site's running heads. */
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-checkout h1,
.wc-block-cart__main .wc-block-components-title,
.wc-block-checkout__main .wc-block-components-title {
	font-family: var(--me-font-display);
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* Buttons, in the theme's ink rather than WooCommerce's purple. */
.wc-block-components-button:not(.is-link),
.wc-block-components-button:not(.is-link):visited {
	background: var(--me-ink);
	border: var(--me-rule) solid var(--me-ink);
	border-radius: var(--me-radius);
	color: var(--me-bg);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--me-accent);
	border-color: var(--me-accent);
	color: var(--me-surface);
}

.wc-block-components-button.is-link {
	color: var(--me-ink);
	text-decoration: underline;
	text-decoration-color: var(--me-accent-2);
}

/* Fields. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-select select {
	background: var(--me-surface);
	border: var(--me-rule) solid var(--me-line);
	border-radius: var(--me-radius);
	color: var(--me-ink);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select select:focus {
	outline: 2px solid var(--me-accent);
	outline-offset: 1px;
}

.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

.wc-block-components-order-summary-item,
.wc-block-cart-items__row,
.wc-block-components-totals-item {
	border-color: var(--me-line);
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price {
	color: var(--me-ink);
	font-variant-numeric: tabular-nums;
}

.wc-block-components-notice-banner {
	border-radius: 0;
	border-left-width: 3px;
	background: var(--me-surface);
	border-left-color: var(--me-accent);
}

/*
 * The empty cart, left-aligned.
 *
 * WooCommerce's default empty-cart pattern centres everything it prints — the
 * illustration above the heading, the dotted rule, the heading itself — while
 * every other element this theme renders starts at the left margin. The
 * pattern is set back to start so it lines up with the page title above it.
 *
 * The wrapper selector used to read `.wc-block-cart__empty-cart`, which is not
 * a class this plugin has ever printed. The rule matched nothing; the only part
 * that took effect was the one on the heading, which left a left-aligned title
 * sitting under a centred illustration. The real wrapper is the one below, and
 * it is worth naming exactly, because a rule that matches nothing fails in
 * silence — the page just looks slightly wrong and no one can say why.
 *
 * The illustration is dropped rather than moved. It is a `::before` on
 * `.with-empty-cart-icon`: a 140px cartoon face, drawn by WooCommerce, sitting
 * where this theme would have a photograph or nothing. A shop that sells coffee
 * by writing about it does not need a sad cartoon to say the bag has not been
 * chosen yet, and at 140px it was the largest object on the page.
 *
 * Removing it has to be done by weight rather than by order. The rule that
 * draws it is not in any stylesheet on disk — the cart block is rendered by
 * JavaScript and its component styles arrive with the JavaScript — so there is
 * no file to read the plugin's selector out of and no way to know how it
 * compares to this one. Carrying two classes on the heading settles it
 * regardless of which sheet the browser happened to inject first, and
 * `content: none` takes the box and its margins with it.
 *
 * The class name is left in the markup. It is the plugin's hook, not ours, and
 * a heading that has quietly stopped being an illustration is a smaller
 * surprise than one that has been renamed underneath a plugin update.
 */
.wp-block-woocommerce-empty-cart-block,
.wp-block-woocommerce-empty-cart-block .has-text-align-center,
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	text-align: start;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	content: none;
}

.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
	margin-inline: 0;
	font-family: var(--me-font-display);
	font-size: var(--me-text-xl);
	letter-spacing: -0.02em;
	text-align: start;
}

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

@media (max-width: 1080px) {
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.single-product .summary {
		position: static;
	}

	.woocommerce-checkout .col2-set {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 620px) {
	ul.products[class*="columns-"],
	.wc-block-grid__products {
		grid-template-columns: minmax(0, 1fr);
	}
}