/* =========================================================================
   pricelist.css — /price-list/.

   A TABLE, AND HERE IT IS THE RIGHT ELEMENT. The cart's line items became a
   list because they are things with pictures and controls; these are four
   parallel columns of the same shape repeated 1,259 times, compared down the
   column rather than read across the row. That is tabular data, and a screen
   reader announcing "კოდი: 03080203043" as a cell in a named column is doing
   something a stack of divs cannot.

   IT IS ALSO A PAGE PEOPLE PRINT, which is most of why it exists — so the print
   rules at the bottom are not an afterthought.
   ========================================================================= */

.bedi-pricelist__head {
	margin-block: var(--bedi-space-7) var(--bedi-space-5);
}

.bedi-pricelist__title {
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--bedi-space-2);
}

.bedi-pricelist__lede {
	color: var(--bedi-ink-muted);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Controls
   ---------------------------------------------------------------------- */

.bedi-pricelist__controls {
	align-items: center;
	background-color: var(--bedi-surface-2);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-3);
	margin-block-end: var(--bedi-space-5);
	padding: var(--bedi-space-4);
}

.bedi-pricelist__control {
	flex: 1 1 12rem;
	min-inline-size: 0;
	position: relative;
}

.bedi-pricelist__control--search {
	flex: 2 1 18rem;
}

.bedi-pricelist__search-icon {
	color: var(--bedi-ink-muted);
	inset-block-start: 50%;
	inset-inline-start: 14px;
	pointer-events: none;
	position: absolute;
	transform: translateY(-50%);
}

.bedi-pricelist__controls input[type="search"],
.bedi-pricelist__controls select {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule-strong);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-base);
	inline-size: 100%;
	min-block-size: 46px;
	padding-inline: var(--bedi-space-5);
}

.bedi-pricelist__controls input[type="search"] {
	padding-inline-start: 42px;
}

/* The select needs its own caret back, since appearance:none removed it. */
.bedi-pricelist__controls select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	padding-inline-end: 40px;
}

.bedi-pricelist__controls input[type="search"]:focus-visible,
.bedi-pricelist__controls select:focus-visible {
	border-color: var(--bedi-accent);
	outline: var(--bedi-focus-width) solid var(--bedi-accent);
	outline-offset: 1px;
}

.bedi-pricelist__apply,
.bedi-pricelist__print,
.bedi-pricelist__export {
	align-items: center;
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--bedi-radius-pill);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-base);
	font-weight: 700;
	gap: var(--bedi-space-2);
	justify-content: center;
	min-block-size: 46px;
	padding-inline: var(--bedi-space-5);
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-pricelist__apply {
	background-color: var(--bedi-accent);
	border: 0;
	color: #fff;
}

.bedi-pricelist__apply:hover {
	background-color: var(--bedi-accent-strong);
}

.bedi-pricelist__print,
.bedi-pricelist__export {
	background-color: transparent;
	border: var(--bedi-border-width) solid var(--bedi-rule-strong);
	color: var(--bedi-ink);
	font-weight: 500;
	text-decoration: none;
}

.bedi-pricelist__print:hover,
.bedi-pricelist__export:hover {
	background-color: var(--bedi-bg-2);
	border-color: var(--bedi-accent);
	color: var(--bedi-accent-strong);
}

/*
 * Hidden only once pricelist.js has taken over the selects, so the form is
 * still submittable when the script never arrives.
 */
.bedi-pricelist__controls.is-live .bedi-pricelist__apply {
	display: none;
}

/* -------------------------------------------------------------------------
   The table
   ---------------------------------------------------------------------- */

.bedi-pricelist__table {
	border-collapse: collapse;
	inline-size: 100%;
	table-layout: fixed;
}

.bedi-pricelist__table thead th {
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule-strong);
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	font-weight: 500;
	padding: var(--bedi-space-3) var(--bedi-space-3);
	text-align: start;
}

.bedi-pricelist__col-img { inline-size: 64px; }
.bedi-pricelist__col-code { inline-size: 9rem; }
.bedi-pricelist__col-price { inline-size: 8rem; text-align: end; }

.bedi-pricelist__table thead th.bedi-pricelist__col-price { text-align: end; }

.bedi-pricelist__row {
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
}

/*
 * A row tint rather than a hover border, because the hover has to survive
 * printing being the main use: a border would print, a tint is dropped below.
 */
.bedi-pricelist__row:hover {
	background-color: var(--bedi-bg-2);
}

.bedi-pricelist__table td {
	padding: var(--bedi-space-3);
	vertical-align: middle;
}

.bedi-pricelist__thumb {
	background-color: var(--bedi-surface-2);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-md);
	display: block;
	block-size: 48px;
	inline-size: 48px;
	overflow: hidden;
}

.bedi-pricelist__thumb img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: contain;
	padding: 2px;
}

.bedi-pricelist__cell-name a {
	color: inherit;
	font-weight: 500;
	text-decoration: none;
}

.bedi-pricelist__cell-name a:hover,
.bedi-pricelist__cell-name a:focus-visible {
	color: var(--bedi-accent-strong);
	text-decoration: underline;
}

.bedi-pricelist__cell-code {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	font-variant-numeric: tabular-nums;
}

.bedi-pricelist__cell-price {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: end;
	white-space: nowrap;
}

.bedi-pricelist__none { color: var(--bedi-rule-strong); }

.bedi-pricelist__note,
.bedi-pricelist__empty {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin-block: var(--bedi-space-4);
}

/* -------------------------------------------------------------------------
   Pager
   ---------------------------------------------------------------------- */

.bedi-pricelist__pager {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-2);
	justify-content: center;
	margin-block: var(--bedi-space-6) var(--bedi-space-9);
}

.bedi-pricelist__pager .page-numbers {
	align-items: center;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	display: inline-flex;
	justify-content: center;
	min-inline-size: 40px;
	min-block-size: 40px;
	padding-inline: var(--bedi-space-3);
	text-decoration: none;
	transition: all var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-pricelist__pager .page-numbers:hover {
	border-color: var(--bedi-accent);
	color: var(--bedi-accent-strong);
}

.bedi-pricelist__pager .page-numbers.current {
	background-color: var(--bedi-accent);
	border-color: var(--bedi-accent);
	color: #fff;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Phone
   ---------------------------------------------------------------------- */

@media (max-width: 47.9375em) {
	.bedi-pricelist__controls { padding: var(--bedi-space-3); }
	.bedi-pricelist__control,
	.bedi-pricelist__control--search { flex: 1 1 100%; }
	.bedi-pricelist__apply,
	.bedi-pricelist__print { flex: 1 1 auto; }

	/*
	 * The thumbnail column goes. At 375px the four columns leave a product name
	 * about ninety pixels wide, and a name is the one thing this page is for.
	 * The picture is the most expendable of the four — every row still links to
	 * the product.
	 */
	.bedi-pricelist__col-img,
	.bedi-pricelist__cell-img { display: none; }

	.bedi-pricelist__col-code { inline-size: 6.5rem; }
	.bedi-pricelist__col-price { inline-size: 6rem; }
	.bedi-pricelist__table td { padding: var(--bedi-space-3) var(--bedi-space-2); }
	.bedi-pricelist__cell-name { font-size: var(--bedi-text-sm); }
}

/* -------------------------------------------------------------------------
   Print — the reason this page exists
   ---------------------------------------------------------------------- */

/*
 * The export's only channel for saying anything.
 *
 * A download cannot report its own failure — the browser has been told to
 * expect a file, so a refusal that renders as HTML is a file too. So a refused
 * export redirects back here carrying a code, and this is where it lands.
 *
 * `role="status"` rather than `alert`: it is the answer to something the
 * visitor just clicked, announced once, not an interruption.
 */
.bedi-pricelist__notice {
	background-color: var(--bedi-bg-2);
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-ink);
	font-size: var(--bedi-text-base);
	line-height: 1.45;
	margin-block: 0 var(--bedi-space-4);
	padding: var(--bedi-space-3) var(--bedi-space-4);
}

@media print {
	/*
	 * Everything that is not the list. A printed price list is a document, and
	 * a header, a floating consultation dock and a pager are all furniture for
	 * a screen.
	 */
	.bedi-header,
	.bedi-footer,
	.bedi-dock,
	.bedi-bottombar,
	.bedi-pricelist__controls,
	.bedi-pricelist__pager,
	.bedi-pricelist__export,
	.bedi-pricelist__notice,
	.bedi-cart-drawer,
	.bedi-toasts {
		display: none !important;
	}

	.bedi-pricelist__title { font-size: 18pt; }
	.bedi-pricelist__lede,
	.bedi-pricelist__note { color: #000; font-size: 9pt; }

	.bedi-pricelist__table { font-size: 9pt; }
	.bedi-pricelist__row { background: none !important; }

	/*
	 * repeat the header on every sheet, and never split a row across two.
	 */
	.bedi-pricelist__table thead { display: table-header-group; }
	.bedi-pricelist__row { break-inside: avoid; page-break-inside: avoid; }

	.bedi-pricelist__thumb { border: 0; }

	/* Links print as text; a URL in brackets after every product name would
	   double the length of the document. */
	.bedi-pricelist__cell-name a { color: #000; text-decoration: none; }
}