/* ==============================================================
   Yanshur — Single product page additions
   1. Publisher guarantees strip (under the stat pills)
   2. Slim discovery banner (very bottom of the page)
   Loaded only on single product pages.

   Scoped to these two blocks only — the surrounding page is
   ReHub's full_width_marketplace layout and is left untouched.
   ============================================================== */

.ysc-publisher-card,
.ysc-guarantees,
.ysc-product-cta{
	--ysc-ink:#182430;
	--ysc-paper:#F8F5EE;
	--ysc-card:#FFFFFF;
	--ysc-red:#C33F31;
	--ysc-red-soft:#FBEAE7;
	--ysc-red-dark:#8f2e23;
	--ysc-green:#3D8361;
	--ysc-green-soft:#E4F1EA;
	/* Warm neutral ink. Carries the "paper" tone of the old neutral pill now
	   that the guarantee badges have no fill to hold it. */
	--ysc-amber:#8C6A33;
	--ysc-amber-soft:#F7EEDC;
	--ysc-slate:#69707E;
	--ysc-line:rgba(24,36,48,0.10);
	--ysc-r-md:14px;
}

/* ---------- Publisher card (under the product image) ---------- */
.ysc-publisher-card{
	display:flex;
	align-items:center;
	justify-content:space-between;
	/* nowrap: the brand and the verified badge stay on one line at every
	   width. The name truncates before the badge is pushed away. */
	flex-wrap:nowrap;
	gap:12px;
	margin:16px 0 0;
	padding:14px 16px;
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-md);
	font-family:'Inter',sans-serif;
}

.ysc-publisher-head{
	display:flex;
	align-items:center;
	gap:11px;
	min-width:0;
}
.ysc-publisher-logo{
	width:38px;
	height:38px;
	border-radius:8px;
	overflow:hidden;
	background:var(--ysc-paper);
	flex-shrink:0;
	display:block;
}
.ysc-publisher-logo img{
	width:100%;
	height:100%;
	object-fit:contain;
	display:block;
	margin:0;
}
.ysc-publisher-meta{ display:block; min-width:0;line-height: 1.6; }
.ysc-publisher-eyebrow{
	display:block;
	font-family:'IBM Plex Mono',monospace;
	font-size:9.5px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ysc-slate);
}
.ysc-publisher-card a.ysc-publisher-name{
	display:block;
	font-family:'Fraunces',serif;
	font-size:15px;
	font-weight:600;
	color:var(--ysc-ink);
	text-decoration:none;
	line-height:1.3;
	transition:.15s;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.ysc-publisher-card a.ysc-publisher-name:hover{ color:var(--ysc-red); }

/* ---------- Publisher tier badge + its legend ---------- */
/* The wrapper is the hover target and the positioning context for the legend.
   position:relative here (rather than on the card) keeps the panel anchored to
   the badge's right edge instead of the card's. */
.ysc-publisher-tier-wrap{
	position:relative;
	flex-shrink:0;
}
.ysc-publisher-tier{
	display:inline-flex;
	align-items:center;
	gap:6px;
	border-radius:100px;
	padding:6px 12px;
	font-size:12px;
	font-weight:600;
	white-space:nowrap;
	cursor:help;
}
.ysc-publisher-tier svg{
	width:14px;
	height:14px;
	flex-shrink:0;
	display:block;
}
/* The focus ring is what makes the legend reachable without a mouse, so it
   stays visible rather than being reset away. */
.ysc-publisher-tier:focus-visible{
	outline:2px solid var(--ysc-ink);
	outline-offset:2px;
}

/* Green = a relationship already proven, gold = the top of the roster, warm
   neutral = a plain fact. New deliberately avoids red or any warning tone:
   being new is not a defect, and the legend says so. */
.ysc-publisher-tier.is-verified{
	background:var(--ysc-green-soft);
	border:1px solid rgba(61,131,97,0.22);
	color:#2c6349;
}
.ysc-publisher-tier.is-top{
	background:var(--ysc-amber-soft);
	border:1px solid rgba(140,106,51,0.24);
	color:var(--ysc-amber);
}
.ysc-publisher-tier.is-new{
	background:var(--ysc-paper);
	border:1px solid var(--ysc-line);
	color:var(--ysc-slate);
}

/* Legend: the outer box carries transparent top padding so the pointer can
   travel from the badge to the panel without crossing a dead gap. */
.ysc-tier-legend{
	position:absolute;
	top:100%;
	right:0;
	z-index:30;
	padding-top:9px;
	width:290px;
	max-width:calc(100vw - 32px);
	opacity:0;
	visibility:hidden;
	transform:translateY(-4px);
	transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.ysc-publisher-tier-wrap:hover .ysc-tier-legend,
.ysc-publisher-tier-wrap:focus-within .ysc-tier-legend{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.ysc-tier-legend-inner{
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:12px;
	padding:12px 13px;
	box-shadow:0 10px 28px rgba(24,36,48,0.13);
}
.ysc-tier-legend-title{
	display:block;
	font-family:'IBM Plex Mono',monospace;
	font-size:9.5px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ysc-slate);
	margin:0 0 8px;
}
.ysc-tier-legend ul{
	margin:0;
	padding:0;
	list-style:none;
}
.ysc-tier-legend li{
	display:flex;
	align-items:flex-start;
	gap:8px;
	margin:0;
	padding:7px 8px;
	border-radius:8px;
	list-style:none;
	white-space:normal;
}
.ysc-tier-legend li svg{
	width:14px;
	height:14px;
	flex-shrink:0;
	margin-top:1px;
	display:block;
}
.ysc-tier-legend li span{
	display:block;
	font-size:11.5px;
	line-height:1.45;
	color:var(--ysc-slate);
}
.ysc-tier-legend li strong{
	display:block;
	font-size:12.5px;
	font-weight:600;
	line-height:1.3;
	color:var(--ysc-ink);
}
/* The row for the badge actually on this product, so the legend answers
   "which one am I looking at" as well as "what do these mean". */
.ysc-tier-legend li.is-current{ background:var(--ysc-paper); }

.ysc-tier-legend li.is-verified svg{ color:var(--ysc-green); }
.ysc-tier-legend li.is-top svg{ color:var(--ysc-amber); }
.ysc-tier-legend li.is-new svg{ color:var(--ysc-slate); }

/* Narrow columns: shrink both sides rather than letting them stack. */
@media(max-width:560px){
	.ysc-publisher-card{
		padding:11px 12px;
		gap:8px;
	}
	.ysc-publisher-head{ gap:8px; }
	.ysc-publisher-logo{ width:32px; height:32px; }
	.ysc-publisher-card a.ysc-publisher-name{ font-size:13px; }
	.ysc-publisher-eyebrow{ font-size:8.5px; }
	.ysc-publisher-tier{
		gap:5px;
		padding:5px 9px;
		font-size:10.5px;
	}
	.ysc-publisher-tier svg{ width:12px; height:12px; }
	.ysc-tier-legend{ width:270px; }
}

/* ---------- 1. Publisher guarantees ---------- */
/* Two columns of natural-width items: with four badges this always lands as a
   tidy 2x2 block, instead of the ragged 2/2/1 wrap a plain flex row produced.
   The rule above the strip separates it from the DA/DR stat pills.

   No fills or borders: four filled pills directly under four filled stat pills
   read as one dense block of chips and the eye stops separating them. Colour
   alone carries the meaning here, and the icon repeats it for anyone who does
   not see the hue — the wording stays explicit either way ("No-follow links",
   not a bare red dot). */
.ysc-guarantees{
	display:grid;
	grid-template-columns:repeat(2, max-content);
	column-gap:26px;
	row-gap:11px;
	margin:0 0 18px;
	padding:16px 0 0;
	border-top:1px solid var(--ysc-line);
	list-style:none;
}
.ysc-guarantees li{
	display:inline-flex;
	justify-self:start;
	align-items:center;
	gap:7px;
	font-family:'Inter',sans-serif;
	font-size:12.5px;
	font-weight:600;
	line-height:1.3;
	list-style:none;
	margin:0;
}
.ysc-guarantees svg{
	width:14px;
	height:14px;
	flex-shrink:0;
}

/* Green = a guarantee in the buyer's favour, red = a restriction to know
   about, warm neutral = a plain fact that is neither. */
.ysc-guarantees li.is-yes{ color:#2c6349; }
.ysc-guarantees li.is-no{ color:#a33326; }
.ysc-guarantees li.is-info{ color:var(--ysc-amber); }

/* Stay two-per-row on narrow screens too, in equal halves so the second
   column keeps a straight left edge instead of collapsing to one column. */
@media(max-width:520px){
	.ysc-guarantees{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		column-gap:14px;
	}
	.ysc-guarantees li{
		justify-self:stretch;
		font-size:11.5px;
	}
}

/* ---------- 2. Slim discovery banner ---------- */
.ysc-product-cta{
	position:relative; /* anchors the Ajax results panel below */
	background:linear-gradient(135deg,var(--ysc-red),var(--ysc-red-dark));
	border-radius:var(--ysc-r-md);
	padding:26px 30px;
	margin:25px 0 10px;
	color:#fff;
	font-family:'Inter',sans-serif;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:26px;
	flex-wrap:nowrap;
}
.ysc-product-cta *{ box-sizing:border-box; }

.ysc-product-cta-text{ flex:1 1 auto; min-width:0; }
.ysc-product-cta-eyebrow{
	display:inline-block;
	font-family:'IBM Plex Mono',monospace;
	font-size:10px;
	letter-spacing:.1em;
	text-transform:uppercase;
	background:rgba(255,255,255,0.18);
	padding:5px 12px;
	border-radius:100px;
	margin-bottom:10px;
}
.ysc-product-cta h2{
	font-family:'Fraunces',serif !important;
	font-size:21px !important;
	font-weight:600 !important;
	margin:0 0 5px !important;
	color:#fff !important;
	line-height:1.3;
}
.ysc-product-cta p{
	margin:0;
	font-size:13.5px;
	color:rgba(255,255,255,0.85);
	line-height:1.55;
}

/* nowrap so the button and the search field are guaranteed to share one line;
   the text block on the left shrinks to make room instead. */
.ysc-product-cta-actions{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
	gap:10px;
	flex:0 1 auto;
}

/* ReHub's search form ships an empty <div class="re-aj-search-wrap"> for its
   Ajax results. Left in the flow it took part in the row and broke the pairing
   above, so it is hidden while empty and floated out of the flow when results
   arrive — dropping below the field rather than squeezing it. */
.ysc-product-cta .re-aj-search-wrap:empty{
	display:none !important;
}
.ysc-product-cta .re-aj-search-wrap{
	position:absolute;
	top:calc(100% - 14px);
	right:30px;
	width:300px;
	max-width:calc(100% - 60px);
	z-index:30;
}

/* Button sits to the left of the search field. */
.ysc-product-cta-btn{ order:1; flex:0 0 auto; }
.ysc-product-cta .product-search-form{ order:2; }

.ysc-product-cta-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:var(--ysc-ink);
	color:#fff !important;
	border-radius:100px;
	padding:13px 22px;
	font-family:'Inter',sans-serif;
	font-size:13.5px;
	font-weight:600;
	white-space:nowrap;
	text-decoration:none !important;
	transition:.18s;
}
.ysc-product-cta-btn:hover{ background:#0f1720; }

/* Search form is ReHub's own product-searchform.php — restyled, not rebuilt,
   so its Ajax search and category dropdown keep working. */
.ysc-product-cta .product-search-form{
	flex:0 1 320px;
	min-width:240px;
	display:flex;
	align-items:center;
	background:#fff;
	border-radius:100px;
	padding:5px 5px 5px 20px;
	gap:8px;
	margin:0;
}
.ysc-product-cta .product-search-form input[type="text"]{
	flex:1;
	min-width:0;
	border:none;
	outline:none;
	background:transparent;
	font-family:'Inter',sans-serif;
	font-size:13.5px;
	color:var(--ysc-ink);
	padding:10px 0;
}
.ysc-product-cta .product-search-form .rh_woo_drop_cat{ display:none; }
.ysc-product-cta .product-search-form .btnsearch{
	background:var(--ysc-ink);
	color:#fff;
	border:none;
	width:40px;
	height:40px;
	border-radius:50%;
	flex-shrink:0;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:.18s;
}
.ysc-product-cta .product-search-form .btnsearch:hover{ background:var(--ysc-red); }

@media(max-width:860px){
	/* Plain block layout, not flex: with a column flex container the browser
	   distributes leftover space between the rows, which is what left the big
	   void between the text and the buttons. Block stacking has no free space
	   to distribute, so the spacing is exactly the margin set here. */
	.ysc-product-cta{
		display:block;
		padding:22px;
	}
	.ysc-product-cta h2{ font-size:18px !important; }
	.ysc-product-cta-text{ margin-bottom:16px; }
	.ysc-product-cta-actions{
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:10px;
		width:100%;
	}
	.ysc-product-cta .product-search-form{ flex:1 1 auto; min-width:0; }
	.ysc-product-cta-btn{ width:100%; }
	.ysc-product-cta .re-aj-search-wrap{
		position:static;
		width:100%;
		max-width:none;
	}
}