/**
 * Single ad (product) page — mobile-first and overflow-safe.
 *
 * The page is built so nothing can ever push the body wider than the screen:
 * the layout column is minmax(0,1fr), every flex/grid child gets min-width:0,
 * long text wraps (overflow-wrap), embedded media is capped to 100%, wide
 * blocks (tables/pre) scroll inside their box, and the whole page has an
 * overflow-x:clip safety net (clip — not hidden — so the desktop sticky rail
 * keeps working).
 *
 * Source / mobile order: title + price → gallery → seller · actions · socials ·
 * safety · location → description · details.
 *
 * Desktop (≥992px): a two-column buy box — gallery left, sticky rail right, with
 * the title/price header top-right above the rail and the description below the
 * gallery.
 *
 * Reuses the gallery / lightbox / map JS via the .single-detailpage-image /
 * .single-detailpage-thumb / #single-map hooks. Price colours come from
 * components.css (.ize-price--*).
 */

/* ── Shell ──────────────────────────────────────────────────────────────── */
/* Clean white page for the single ad — not the grey page canvas. ad-single.css
 * loads only on single-ad pages (is_singular('ad')) and after base.css, so this
 * repaints just this template; the rest of the site keeps --ize-page-bg. The
 * gallery stage keeps its own grey — it letterboxes contain-fit photos. */
body.ize { background: var(--ize-surface); }

.ize-ad {
	overflow-x: clip;          /* safety net: clip stray overflow, keep sticky working */
	text-align: left;          /* the whole ad reads left-aligned; resets any centering
	                              inherited from the legacy theme layers */
}
.ize-ad,
.ize-ad *,
.ize-ad *::before,
.ize-ad *::after { box-sizing: border-box; }

.ize-ad__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 16px 40px;
}

/* No piece of media ever overflows its column. */
.ize-ad img,
.ize-ad svg,
.ize-ad iframe,
.ize-ad video { max-width: 100%; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.ize-ad__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );   /* the 0 min lets the column shrink */
	gap: 20px;
}
@media ( min-width: 992px ) {
	.ize-ad__layout {
		grid-template-columns: minmax( 0, 1fr ) 380px;
		grid-template-areas:
			"gallery header"
			"gallery rail"
			"content rail";
		column-gap: 28px;
		row-gap: 24px;
		align-items: start;
	}
	.ize-ad__header  { grid-area: header; }
	.ize-ad__gallery { grid-area: gallery; }
	.ize-ad__rail    { grid-area: rail; position: sticky; top: 16px; }
	.ize-ad__content { grid-area: content; }
}

/* ── Header: title + price (top of the page on mobile, top-right on desktop) ─ */
.ize-ad__header { min-width: 0; }
/* Featured pill (same component as the feed cards) sits above the title. */
.ize-ad__header .ize-badge { margin-bottom: 10px; }
.ize-ad__title {
	font-size: var(--ize-fs-xl);
	line-height: 1.25;
	font-weight: 600;
	margin: 0 0 10px;
	color: var(--ize-ink);
	overflow-wrap: anywhere;   /* a long, unbroken title can't widen the page */
}
.ize-ad__price {
	font-size: var(--ize-fs-2xl);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ize-line);
}

/* ── Gallery: main image + thumbnail strip ──────────────────────────────── */
.ize-ad__gallery {
	display: flex;
	flex-direction: column;    /* mobile: image on top, thumbs below */
	gap: 10px;
	min-width: 0;
}
.ize-ad__stage {
	position: relative;        /* anchor for the save-star overlay */
	min-width: 0;
	height: 340px;             /* fixed box: the image area keeps its size when you
	                              switch images instead of growing/shrinking */
	background: var(--ize-surface-2);
	border-radius: 8px;
	overflow: hidden;
}
.ize-ad__stage .single-detailpage-image { display: block; height: 100%; }
.ize-ad__stage .single-detailpage-image.hidden { display: none; }
.ize-ad__stage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;       /* whole photo shown, centred, never cropped or stretched */
}

.ize-ad__thumbs {
	display: flex;
	flex-direction: row;       /* mobile: a horizontal, swipeable strip */
	gap: 8px;
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
}
.ize-ad__thumbs .single-detailpage-thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 56px;
	object-fit: cover;
	border: 2px solid var(--ize-line);
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.ize-ad__thumbs .single-detailpage-thumb:hover,
.ize-ad__thumbs .single-detailpage-thumb.is-active { border-color: var(--ize-ink-3); }

@media ( min-width: 601px ) {
	.ize-ad__gallery { flex-direction: row; align-items: flex-start; }
	.ize-ad__stage { flex: 1 1 auto; height: 420px; }
	.ize-ad__thumbs {
		flex: 0 0 88px;
		flex-direction: column;
		width: auto;
		max-height: 420px;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.ize-ad__thumbs .single-detailpage-thumb { flex: 0 0 auto; width: 100%; height: 66px; }
}

/* Single image (no thumbnail strip): on desktop the gallery shares its grid
 * column with the description but spans the height of the taller right rail, so
 * a fixed-height stage leaves a gap below the photo. Let the gallery stretch to
 * fill that height and centre the photo in it (object-fit already centres), so
 * the empty space is taken up instead of left as a gap. */
@media ( min-width: 992px ) {
	.ize-ad__gallery--single { align-self: stretch; }
	.ize-ad__gallery--single .ize-ad__stage { height: 100%; min-height: 420px; }
}

/* ── Right rail ─────────────────────────────────────────────────────────── */
.ize-ad__rail {
	min-width: 0;
	background: var(--ize-surface);
	border: 1px solid var(--ize-line);
	border-radius: 10px;
	padding: 18px;
}

/* Owner controls — a tinted panel at the top of the rail, shown only to the ad's
   owner, with the note + Edit button so they can jump straight into the form. */
.ize-ad__owner {
	margin-bottom: 14px;
	padding: 12px;
	background: var(--ize-surface-2);
	border: 1px solid var(--ize-line);
	border-radius: 8px;
}
.ize-ad__owner-note {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 10px;
	font-size: var(--ize-fs-sm);
	color: var(--ize-ink-2);
}
.ize-ad__owner-note .fa { color: var(--ize-ink-3); }

/* Seller card — the whole block links to the store (JS), so it carries a light
   border that highlights on hover to signal it's clickable. */
.ize-ad__seller-card {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	border: 1px solid var(--ize-line);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 14px;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ize-ad__seller-card:hover {
	background: var(--ize-surface-2);
	box-shadow: var(--ize-shadow-sm);
}
.ize-ad__seller-card .ize-seller__media { flex: 1; min-width: 0; margin-bottom: 0; }
.ize-ad__seller-card .ize-seller__name { font-size: var(--ize-fs-base); }
.ize-ad__seller-card .ize-seller__name,
.ize-ad__seller-card .ize-seller__name a { font-weight: 400; }
/* The seller name links to the store. Other seller fields keep their
   storefront.css token colours. */
.ize-ad__seller-card .ize-seller__name a { color: var(--ize-ink); text-decoration: none; }
.ize-ad__seller-card .ize-seller__info { min-width: 0; }
.ize-ad__seller-card .ize-seller__info li { overflow-wrap: anywhere; }
/* Phone is plain contact text, not a brand-coloured link. */
.ize-ad__seller-card .ize-seller__info .phone-reveal { color: var(--ize-ink-2); cursor: pointer; }
.ize-ad__seller-go { flex-shrink: 0; color: var(--ize-ink-3); font-size: var(--ize-fs-md); }

/* Actions — borderless, compact two-up grid that hugs the left. */
.ize-ad__actions {
	display: grid;
	grid-template-columns: minmax( 0, auto ) minmax( 0, auto );
	justify-content: start;
	gap: 8px 14px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.ize-ad__actions a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 4px 0;
	font-size: var(--ize-fs-sm);
	color: var(--ize-ink-2);
	text-decoration: none;
	cursor: pointer;
}
.ize-ad__actions .fa { width: 16px; text-align: center; color: var(--ize-ink-3); }

/* Save-star overlaid on the single-ad main image, top-left. A soft shadow keeps
 * it legible over any photo; it takes the brand colour once saved (.is-starred,
 * in components.css). The tooltip is flipped to the right of the star here so it
 * doesn't run off the left edge of the image. */
.ize-ad__stage .ize-save-wrap--image {
	position: absolute;
	top: var(--ize-2);
	left: var(--ize-2);
	z-index: 2;
}
.ize-ad__stage .ize-save-wrap--image .ize-save {
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	transition: transform 0.12s var(--ize-ease), color 0.12s var(--ize-ease);
}
.ize-ad__stage .ize-save-wrap--image .ize-save .fa {
	font-size: 22px;
	line-height: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.ize-ad__stage .ize-save-wrap--image .ize-save:hover { transform: scale(1.08); }
/* Flip the tooltip to the right of the star (its default sits on the left). */
.ize-ad__stage .ize-save-wrap--image .ize-save-tip {
	right: auto;
	left: 100%;
	padding-right: 0;
	padding-left: var(--ize-2);
}
.ize-ad__stage .ize-save-wrap--image .ize-save-tip__link::after {
	left: auto;
	right: 100%;
	border-left-color: transparent;
	border-right-color: var(--ize-ink);
}

/* Socials — icon look comes from the shared .ize-social component (socials.css);
 * here we only set the single-ad layout (bottom spacing). */
.ize-ad__socials {
	margin: 0 0 14px;
}

/* Safety notice — box + text colours from Theme Options → Appearance → Ads; the
   border is derived from the box colour so the two settings stay cohesive. */
.ize-ad__safety {
	background: var(--ize-safety-box, #fff8e6);
	border: 1px solid #ecd9a3;
	border: 1px solid color-mix( in srgb, var(--ize-safety-box, #fff8e6), #000 18% );
	border-radius: 8px;
	margin-bottom: 14px;
}
.ize-ad__safety summary {
	list-style: none;
	cursor: pointer;
	padding: 10px 12px;
	font-weight: 700;
	color: var(--ize-safety-text, #5b4a23);
}
.ize-ad__safety summary::-webkit-details-marker { display: none; }
.ize-ad__safety summary .fa { margin-right: 6px; }
.ize-ad__safety[open] summary {
	border-bottom: 1px solid #ecd9a3;
	border-bottom: 1px solid color-mix( in srgb, var(--ize-safety-box, #fff8e6), #000 18% );
}
.ize-ad__safety-body {
	padding: 10px 12px;
	font-size: var(--ize-fs-sm);
	line-height: 1.5;
	color: var(--ize-safety-text, #5b4a23);
	overflow-wrap: anywhere;
}

/* Location */
.ize-ad__location-title { font-size: var(--ize-fs-base); margin: 0 0 8px; }
.ize-ad__location-text { margin: 0 0 8px; font-size: var(--ize-fs-sm); color: var(--ize-ink-2); }
.ize-ad__map { height: 220px; border-radius: 8px; overflow: hidden; }

/* ── Description + details ──────────────────────────────────────────────── */
.ize-ad__content {
	min-width: 0;
	background: var(--ize-surface);
	border: 1px solid var(--ize-line);
	border-radius: 10px;
	padding: 20px;
}
.ize-ad__description {
	line-height: 1.65;
	color: var(--ize-ink);
	overflow-wrap: anywhere;   /* long words / URLs wrap instead of overflowing */
}
.ize-ad__description img { height: auto; border-radius: 6px; }
/* Embedded media + wide blocks stay inside the column. */
.ize-ad__description iframe,
.ize-ad__description video { width: 100%; }
.ize-ad__description table,
.ize-ad__description pre { display: block; max-width: 100%; overflow-x: auto; }

.ize-ad__details { margin-top: 20px; border-top: 1px solid var(--ize-surface-3); padding-top: 16px; }
.ize-ad__details .detailpage-details h3 { font-size: var(--ize-fs-base); margin: 0 0 12px; }
.ize-ad__details dl {
	display: grid;
	grid-template-columns: minmax( 0, max-content ) minmax( 0, 1fr );
	gap: 6px 18px;
	margin: 0;
}
.ize-ad__details dt { font-weight: 600; color: var(--ize-ink-2); }
.ize-ad__details dd { margin: 0; color: var(--ize-ink); overflow-wrap: anywhere; }
@media ( max-width: 420px ) {
	/* Very narrow phones: stack label over value so neither is cramped. */
	.ize-ad__details dl { grid-template-columns: 1fr; gap: 2px 0; }
	.ize-ad__details dd { margin-bottom: 8px; }
}

/* ── Subtle scrollbars (description, thumbnails) ─────────────────────────── */
.ize-ad__description,
.ize-ad__thumbs { scrollbar-width: thin; scrollbar-color: rgba( 0, 0, 0, 0.22 ) transparent; }
.ize-ad__description::-webkit-scrollbar,
.ize-ad__thumbs::-webkit-scrollbar { width: 8px; height: 8px; }
.ize-ad__description::-webkit-scrollbar-track,
.ize-ad__thumbs::-webkit-scrollbar-track { background: transparent; }
.ize-ad__description::-webkit-scrollbar-thumb,
.ize-ad__thumbs::-webkit-scrollbar-thumb { background: rgba( 0, 0, 0, 0.18 ); border-radius: 8px; }
.ize-ad__description:hover::-webkit-scrollbar-thumb,
.ize-ad__thumbs:hover::-webkit-scrollbar-thumb { background: rgba( 0, 0, 0, 0.30 ); }

/* ── Similar ads ────────────────────────────────────────────────────────────
 * A full-width strip below the two-column layout, reusing the feed card grid
 * (.ize-grid). Set apart from the content above with a top border + spacing. */
.ize-ad__similar {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--ize-line);
}
.ize-ad__similar-title {
	font-size: var(--ize-fs-md);
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--ize-ink);
}

/* ── Print: just the ad (image, title, price, description) ───────────────────
 * The Print action calls window.print(); strip the site chrome and the rail so
 * a printed ad is only its content. This file loads only on single-ad pages, so
 * these rules can't affect printing elsewhere. */
@media print {
	body { background: #fff !important; }

	/* Site chrome off. */
	#wpadminbar,
	.ize-header,
	.ize-breadcrumb,
	.ize-bottom-nav,
	.ize-footer,
	.modal { display: none !important; }

	/* Inside the ad: keep image + title/price + description; drop the rest. */
	.ize-ad__rail,
	.ize-ad__thumbs,
	.ize-ad__similar { display: none !important; }

	/* One simple full-width column on paper. */
	.ize-ad,
	.ize-ad__container,
	.ize-ad__layout {
		display: block !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ize-ad__header { margin: 0 0 8px !important; }
	.ize-ad__title { font-size: 20pt !important; }
	.ize-ad__price { margin: 4px 0 12px !important; font-size: 15pt !important; }

	/* Main image: a sensible size, never split across pages. */
	.ize-ad__gallery { margin: 0 0 12px !important; }
	.ize-ad__stage {
		height: auto !important;
		max-height: 4in;
		background: none !important;
		overflow: visible !important;
		page-break-inside: avoid;
		break-inside: avoid;
	}
	.ize-ad__stage img {
		width: auto !important;
		max-width: 100% !important;
		max-height: 4in;
	}
	.ize-ad__content { margin-top: 0 !important; }

	/* Bootstrap's print CSS appends "(url)" after links — suppress that. */
	a[href]::after { content: "" !important; }
}