/* ==============================================================
   Yanshur — Shop grid card (v2)
   Scoped under .yanshur-shop-grid so it cannot leak into / clash
   with rehub-theme's own design-system CSS custom properties.
   ============================================================== */

.yanshur-shop-grid{
	--ysc-ink:#182430;
	--ysc-paper:#F8F5EE;
	--ysc-card:#FFFFFF;
	--ysc-red:#C33F31;
	--ysc-brass:#B08935;
	--ysc-brass-soft:#F7EFDD;
	--ysc-green:#3D8361;
	--ysc-slate:#69707E;
	--ysc-line: rgba(24,36,48,0.10);
	--ysc-shadow: 0 18px 40px -18px rgba(24,36,48,0.18);
	--ysc-r-md:14px;
	--ysc-r-sm:9px;

	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
	list-style:none;
	margin:0 0 30px;
	padding:0;
}

@media(max-width:980px){
	.yanshur-shop-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
	.yanshur-shop-grid{grid-template-columns:1fr;}
}
.woocommerce .woocommerce-result-count {
    font-size: 12px !important;
    font-style: normal!important;
    font-family: 'IBM Plex Mono', monospace!important;
}
.yanshur-shop-grid .ysc-card{
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-md);
	overflow:hidden;
	transition:.2s;
	display:flex;
	flex-direction:column;
	font-family:'Inter',sans-serif;
	color:var(--ysc-ink);
	float:none;
	width:auto;
	margin:0;
}
.yanshur-shop-grid .ysc-card:hover{
	box-shadow:var(--ysc-shadow);
	transform:translateY(-4px);
}

.yanshur-shop-grid .ysc-media{
	position:relative;
	display:block;
	box-sizing:border-box;
	aspect-ratio:16/10;
	background:var(--ysc-card);
	overflow:hidden;
	padding: 5px 20px 0px 20px;
}
/* contain, not cover: these are publisher logos, not photographs. cover
   filled the box by cropping, which cut the edges off logos (and cropped
   them differently per publisher, since every logo has its own proportions).
   It also meant the framing shifted whenever the card width changed or the
   browser picked a different srcset candidate. contain keeps every logo whole
   and identical across cards. */
.yanshur-shop-grid .ysc-media img{
	width:100%;
	height:100%;
	object-fit:contain;
	display:block;
	margin:0;
}

.yanshur-shop-grid .ysc-badge{
	position:absolute;
	top:12px;
	font-family:'IBM Plex Mono',monospace;
	font-size:9.5px;
	letter-spacing:0.06em;
	text-transform:uppercase;
	background:rgba(255,255,255,0.92);
	padding:2px 10px;
	border: 1px solid rgb(24,36,48,0.05);
	border-radius:100px;
}
.yanshur-shop-grid .ysc-badge--cat{ left:12px; color:var(--ysc-red); }
.yanshur-shop-grid .ysc-badge--lang{ right:12px; color:var(--ysc-ink); }

.yanshur-shop-grid .ysc-body{
	padding: 2px 20px 20px 20px;
	display:flex;
	flex-direction:column;
	flex:1;
}
.yanshur-shop-grid .ysc-title{
	font-size:19px;
	margin:0 0 14px;
	font-weight:600;
	font-family:'Fraunces',serif;
	line-height:1.3;
}
.yanshur-shop-grid .ysc-title a{
	color:inherit;
	text-decoration:none;
}

.yanshur-shop-grid .ysc-stats{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	background:var(--ysc-paper);
	border-radius:var(--ysc-r-sm);
	padding:12px 2px;
	margin-bottom:16px;
}
.yanshur-shop-grid .ysc-stat{
	text-align:center;
	border-right:1px solid var(--ysc-line);
	padding:0 4px;
	min-width:0;
}
.yanshur-shop-grid .ysc-stat:last-child{ border-right:none; }
.yanshur-shop-grid .ysc-stat-n{
	font-family:'Fraunces',serif;
	font-weight:700;
	font-size:16px;
	color:var(--ysc-ink);
}
.yanshur-shop-grid .ysc-stat-l{
	font-family:'IBM Plex Mono',monospace;
	font-size:9px;
	color:var(--ysc-slate);
	text-transform:uppercase;
	margin-top:3px;
	letter-spacing:0;
	white-space:nowrap;
}
.yanshur-shop-grid .ysc-stat--da .ysc-stat-n{ color:var(--ysc-brass); }
.yanshur-shop-grid .ysc-stat--dr .ysc-stat-n{ color:var(--ysc-green); }

.yanshur-shop-grid .ysc-foot{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:auto;
	padding-top:4px;
	gap:10px;
}
.yanshur-shop-grid .ysc-price{
	font-family:'IBM Plex Mono',monospace;
	font-size:12px;
	color:var(--ysc-slate);
	line-height: 1.6;
}
.yanshur-shop-grid .ysc-price b{
	font-family:'Fraunces',serif;
	color:var(--ysc-ink);
	font-size:19px;
	font-weight:700;
	display:block;
}
.yanshur-shop-grid .ysc-price .woocommerce-Price-amount{ font-size:inherit; }

.yanshur-shop-grid .ysc-btn,
.yanshur-shop-grid a.ysc-btn.button{
	background:var(--ysc-ink) !important;
	color:#fff !important;
	font-size:12px;
	font-weight:600;
	padding:11px 18px;
	border-radius:9px;
	font-family:'Inter',sans-serif;
	transition:.18s;
	border:none;
	white-space:nowrap;
	line-height:1.2;
}
.yanshur-shop-grid .ysc-btn:hover{
	background:var(--ysc-red) !important;
}
.yanshur-shop-grid .ysc-btn.loading{
	opacity:.6;
}