/*
 * Usedkit on the shop's pages. Built to sit inside any theme: colours come from the
 * theme's text colour (currentColor) wherever they can, buttons use the theme's own
 * .button, the "in stock now" grid is the theme's related-products grid, and the
 * condition filter is styled like its sorting select. Only the grade colours are ours.
 */
.usedkit-card, .usedkit-cond, .usedkit-disclose, .usedkit-trade {
	--uk-line: rgba(127, 127, 127, .28);
	--uk-soft: rgba(127, 127, 127, .07);
	--uk-muted: rgba(127, 127, 127, 1);
	--uk-radius: 12px;
}

/* ---- condition --------------------------------------------------------------------- */
.usedkit-grade-new, .usedkit-grade-like_new { --uk-g: #15803d; --uk-gbg: #e8f6ec; }
.usedkit-grade-excellent { --uk-g: #1d4ed8; --uk-gbg: #e8effd; }
.usedkit-grade-good { --uk-g: #475569; --uk-gbg: #eef1f5; }
.usedkit-grade-fair { --uk-g: #b45309; --uk-gbg: #fdf2e3; }
.usedkit-grade-parts { --uk-g: #b91c1c; --uk-gbg: #fdeaea; }

.usedkit-cond { margin: 4px 0 20px; padding: 14px 16px; border: 1px solid var(--uk-line); border-radius: var(--uk-radius); }
.usedkit-cond__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.usedkit-cond__label { display: block; font-size: .75em; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.usedkit-cond__grade { font-weight: 650; font-size: 1.1em; color: var(--uk-g); }
.usedkit-scale { display: flex; gap: 3px; }
.usedkit-scale i { width: 16px; height: 6px; border-radius: 3px; background: var(--uk-line); }
.usedkit-scale i.on { background: var(--uk-g); }
.usedkit-cond__desc { margin: 6px 0 0; font-size: .93em; opacity: .8; }
.usedkit-cond__note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--uk-line); font-size: .93em; }
.usedkit-cond__inc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .85em; }
.usedkit-cond__inc li { margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--uk-soft); }

/* The grade in product listings and the grading table: a small pill with a dot. */
.usedkit-grade { display: inline-flex; align-items: center; gap: 6px; width: fit-content; align-self: flex-start;
	margin: 2px 0 6px; padding: 2px 9px 2px 8px; border-radius: 999px; font-size: .78em; font-weight: 600;
	line-height: 1.6; background: var(--uk-gbg, #eef1f5); color: var(--uk-g, #475569); }
.usedkit-grade::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.usedkit-grades dt { margin-top: 12px; }
.usedkit-grades dd { margin: 4px 0 0; opacity: .8; }

/* ---- the boxes: notify me, offer, reserve ------------------------------------------- */
.usedkit-card { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--uk-line); border-radius: var(--uk-radius);
	background: var(--uk-soft); }
.usedkit-card__title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 650; }
.usedkit-card__title svg { width: 18px; height: 18px; flex: none; }
.usedkit-card__sub { margin: 0 0 12px; font-size: .9em; opacity: .75; }
.usedkit-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.usedkit-row > input, .usedkit-row > .usedkit-field { flex: 1 1 200px; min-width: 0; margin: 0; }
.usedkit-row > button, .usedkit-row > .button { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.usedkit-field { display: flex; flex-direction: column; gap: 4px; }
.usedkit-field > span { font-size: .8em; opacity: .7; }
.usedkit-field input, .usedkit-field select, .usedkit-field textarea, .usedkit-row > input { width: 100%; box-sizing: border-box; }
.usedkit-inline { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .88em; }
.usedkit-inline > span { opacity: .75; }
.usedkit-card .usedkit-inline input { width: 110px; max-width: 110px; flex: 0 0 110px; min-height: 0; padding-block: 6px; }
.usedkit-fine { margin: 10px 0 0; font-size: .8em; opacity: .65; }
.usedkit-stack { display: grid; gap: 10px; }

.usedkit-msg { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; font-size: .92em; }
.usedkit-ok { background: #e8f6ec; color: #14532d; }
.usedkit-err { background: #fdeaea; color: #7f1d1d; }
.usedkit-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Offer and reserve: a quiet row that opens into its form. */
.usedkit-disclose { margin: 10px 0; border: 1px solid var(--uk-line); border-radius: var(--uk-radius); }
.usedkit-disclose > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
	list-style: none; font-weight: 600; }
.usedkit-disclose > summary::-webkit-details-marker { display: none; }
.usedkit-disclose > summary svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.usedkit-disclose > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border: solid currentColor;
	border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .5; transition: transform .15s; }
.usedkit-disclose[open] > summary::after { transform: rotate(-135deg); }
.usedkit-disclose > div { padding: 0 16px 16px; }
.usedkit-disclose .usedkit-card__sub { margin-top: 0; }
.usedkit-held { display: flex; align-items: center; gap: 8px; margin: 10px 0; padding: 10px 14px; border-radius: 10px;
	background: #fdf2e3; color: #7c4a03; font-weight: 600; font-size: .95em; }

/* ---- in stock now, on a sold item's page --------------------------------------------- */
.usedkit-similar { clear: both; }

/* ---- the condition filter, beside the sorting ---------------------------------------- */
.woocommerce-ordering.usedkit-cfilter { margin-right: 10px; }

/* ---- trade-in ------------------------------------------------------------------------ */
.usedkit-trade { max-width: 620px; margin: 0 auto 24px; }
.usedkit-trade__intro { margin: 0 0 18px; font-size: 1.05em; opacity: .8; }
.usedkit-condset { margin: 0; padding: 0; border: 0; min-width: 0; }
.usedkit-condset legend { padding: 0; margin: 0 0 4px; font-size: .8em; font-weight: 400; opacity: .7; }
.usedkit-conds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.usedkit-conds > label { margin: 0; }
.usedkit-conds label { display: block; padding: 10px 12px; border: 1px solid var(--uk-line); border-radius: 10px;
	cursor: pointer; font-size: .88em; line-height: 1.35; }
.usedkit-conds label b { display: block; margin-bottom: 2px; font-size: 1.05em; }
.usedkit-conds input { position: absolute; opacity: 0; pointer-events: none; }
.usedkit-conds input:checked + span { display: block; }
.usedkit-conds label:has(input:checked) { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.usedkit-conds label:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 560px) { .usedkit-conds { grid-template-columns: 1fr; } }
.usedkit-offer { margin: 6px 0 4px; font-size: 1.1em; }
.usedkit-offer b { display: block; font-size: 2.2em; line-height: 1.1; }
.usedkit-trade h3 { margin: 0 0 6px; }

/* ---- under the price: the lowest price before a discount, the market price ------------ */
.usedkit-omnibus { display: block; margin-top: 2px; font-size: .78em; font-weight: 400; opacity: .7; }
.usedkit-market { margin: 4px 0 14px; font-size: .92em; opacity: .8; }
.usedkit-market a { color: inherit; }
.usedkit-card .button svg, .usedkit-held svg { width: 18px; height: 18px; vertical-align: -4px; }

/* ---- condition: the other ways of showing it ------------------------------------------- */
.usedkit-cond--line { padding: 0; border: 0; }
.usedkit-cond--line .usedkit-grade { margin: 0 6px 0 0; vertical-align: 1px; }
.usedkit-cond--line .usedkit-cond__desc { margin: 0; }
.usedkit-cond--line .usedkit-cond__note { margin-top: 8px; padding-top: 0; border-top: 0; opacity: .85; }
li.product { position: relative; }
.usedkit-grade.usedkit-on-photo { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.woocommerce-product-gallery__image, .woocommerce-product-gallery figure { position: relative; }
.usedkit-cond-text { display: block; margin: 2px 0 6px; font-size: .85em; opacity: .8; }
.usedkit-cond-scale { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: .8em; font-weight: 600;
	color: var(--uk-g); }
.usedkit-cond-scale .usedkit-scale i { width: 10px; height: 5px; background: rgba(127, 127, 127, .28); }
.usedkit-cond-scale .usedkit-scale i.on { background: var(--uk-g); }