/**
 * Seller (storefront) page — /store/{user}/ (author.php).
 * Cover image, seller details (left), sticky scoped search + paginated listings
 * (right). Depends on: tokens.css, components.css (cards/buttons/grid).
 */

.ize-seller {
	max-width: var(--ize-container);
	margin: 0 auto;
	padding: 0 var(--ize-4) var(--ize-6);
}

/* Breadcrumb sits inside the seller box (which is already --ize-container wide
 * with a --ize-4 gutter), so its trail lines up with the cover, details card and
 * listings below — the same content edges the title bar uses on the other pages.
 * A small top margin lifts it just clear of the nav without dropping it too low. */
.ize-seller > .ize-breadcrumb {
	margin-top: var(--ize-4);
}

/* ── Cover / banner (full width, under the header) ──────────────────────── */
/* Rendered as an <img> so the entire banner is visible — never cover-cropped,
 * so edge text isn't cut off. Capped height keeps a tall image reasonable. */
.ize-seller__cover {
	display: block;
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: contain;
	margin: var(--ize-4) 0 var(--ize-5);
	border-radius: var(--ize-radius);
}
@media (max-width: 768px) {
	.ize-seller__cover { margin: var(--ize-3) 0 var(--ize-4); }
}

/* ── Header block: info card (left) + About & search (right) ────────────── */
/* The grid makes both columns equal height automatically, so the full-width
 * listings below always start on one clean line (no staggering). */
.ize-seller__header {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ize-5);
	align-items: stretch;
	margin-bottom: var(--ize-5);
}
@media (min-width: 900px) {
	.ize-seller__header { grid-template-columns: 320px 1fr; }
}

.ize-seller__details { display: flex; }
.ize-seller__intro   { display: flex; flex-direction: column; gap: var(--ize-4); }

/* ── Seller details card ────────────────────────────────────────────────── */
.ize-seller__card {
	flex: 1;
	background: var(--ize-surface);
	border: 1px solid var(--ize-line);
	border-radius: var(--ize-radius-lg);
	padding: var(--ize-4);
}
/* Media object: logo on the left, details (name + count, location, phone) on
 * the right — mirroring the original seller card structure. */
.ize-seller__media {
	display: flex;
	align-items: flex-start;
	gap: var(--ize-3);
	margin-bottom: var(--ize-3);
}
.ize-seller__logo {
	flex-shrink: 0;
	width: 90px;
	height: 90px;
	border-radius: var(--ize-radius);
	overflow: hidden;
	background: var(--ize-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ize-seller__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ize-seller__initial { font-size: var(--ize-fs-xl); font-weight: 700; color: var(--ize-ink-2); }

.ize-seller__media-body { flex: 1 1 auto; min-width: 0; }
.ize-seller__name {
	font-size: var(--ize-fs-md);
	margin: 0 0 var(--ize-2);
	line-height: 1.3;
}
.ize-seller__name i { color: var(--ize-ink-3); margin-right: 2px; }
.ize-seller__count { font-weight: 400; font-size: var(--ize-fs-sm); color: var(--ize-ink-3); }

.ize-seller__info {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ize-2);
}
.ize-seller__info li {
	font-size: var(--ize-fs-sm);
	color: var(--ize-ink-2);
}
.ize-seller__info i { color: var(--ize-ink-3); width: 16px; text-align: center; }
.ize-seller__info a { color: var(--ize-ink-2); text-decoration: none; cursor: pointer; }

/* Icon appearance comes from the shared .ize-social component (socials.css).
 * Here we only set the seller-page layout: a divider above the row. */
.ize-seller__socials {
	margin: var(--ize-3) 0 0;
	padding: var(--ize-3) 0 0;
	border-top: 1px solid var(--ize-line);
}
.ize-seller__socials-label {
	font-size: var(--ize-fs-sm);
	font-weight: 600;
	color: var(--ize-ink-2);
	margin-right: var(--ize-1);
}

/* Contact / report actions — same borderless link look as the single-ad card,
 * with a divider above the row to match the socials block. */
.ize-seller__actions {
	margin: var(--ize-3) 0 0;
	padding: var(--ize-3) 0 0;
	border-top: 1px solid var(--ize-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ize-2) var(--ize-4);
	list-style: none;
}
.ize-seller__actions a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--ize-fs-sm);
	color: var(--ize-ink-2);
	text-decoration: none;
	cursor: pointer;
}
.ize-seller__actions a:hover { color: var(--ize-ink-1); }
.ize-seller__actions .fa { width: 16px; text-align: center; color: var(--ize-ink-3); }

/* About — only rendered when the seller wrote a bio. Clamped to a few lines
 * with a pure-CSS read more/less (a hidden checkbox toggled by the label), so it
 * works on mobile with no JS. */
.ize-seller__about {
	background: var(--ize-surface);
	border: 1px solid var(--ize-line);
	border-radius: var(--ize-radius-lg);
	padding: var(--ize-4);
}
.ize-seller__about-title { font-size: var(--ize-fs-md); margin: 0 0 var(--ize-2); }
.ize-seller__about-cb { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ize-seller__about-body {
	font-size: var(--ize-fs-sm);
	color: var(--ize-ink-2);
	line-height: var(--ize-lh);
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Checked → show the full text. */
.ize-seller__about-cb:checked ~ .ize-seller__about-body {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}
.ize-seller__about-body p:last-child { margin-bottom: 0; }
.ize-seller__about-toggle {
	display: inline-block;
	margin-top: var(--ize-2);
	cursor: pointer;
	font-size: var(--ize-fs-sm);
	font-weight: 600;
	user-select: none;
}
.ize-seller__about-toggle:hover { text-decoration: underline; }
/* Swap the label text based on the checkbox state. */
.ize-seller__about-less { display: none; }
.ize-seller__about-cb:checked ~ .ize-seller__about-toggle .ize-seller__about-more { display: none; }
.ize-seller__about-cb:checked ~ .ize-seller__about-toggle .ize-seller__about-less { display: inline; }

/* ── Listings ───────────────────────────────────────────────────────────── */
.ize-seller__empty { padding: var(--ize-6) 0; }
/* Pagination (.ize-pagination) is a shared component — see components.css. */

/* Seller name acts as a "home" link back to page 1 of the store */
.ize-seller__name-link { color: inherit; text-decoration: none; }
.ize-seller__name-link:hover,
.ize-seller__name-link:focus { text-decoration: underline; }