/* ============================================================
   Nádor Terméklista — scoped (.ntl)
   Téma-független, szögletes kártyák. Színek: a .ntl tokenek.
   ============================================================ */
.ntl{
	--ntl-ink:#1f1d1a;
	--ntl-soft:#7a716a;
	--ntl-bg:#ffffff;
	--ntl-line:rgba(31,29,26,.14);
	--ntl-accent:#b69582;
	--ntl-accent-dk:#8a6f5c;
	--ntl-shadow:0 18px 50px -28px rgba(31,29,26,.4);
	--ntl-cols:4;
	color:var(--ntl-ink);
}
.ntl *{box-sizing:border-box}

.ntl-grid{
	display:grid;
	grid-template-columns:repeat(var(--ntl-cols),1fr);
	gap:clamp(22px,2.6vw,40px) clamp(18px,2.2vw,30px);
}

.ntl-card{
	position:relative;
	display:flex;
	flex-direction:column;
	background:var(--ntl-bg);
	overflow:hidden;
}

.ntl-thumb{
	position:relative;
	display:block;
	aspect-ratio:4/5;
	overflow:hidden;
	background:#f2efec;
}
.ntl-thumb img{
	width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.ntl-card:hover .ntl-thumb img{transform:scale(1.05)}

.ntl-badge{
	position:absolute;top:12px;left:12px;z-index:2;
	background:var(--ntl-ink);color:#fff;
	font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
	padding:.45em .8em;
}

.ntl-body{
	display:flex;flex-direction:column;gap:6px;flex:1;
	padding:18px 2px 0;
	border-top:1px solid var(--ntl-line);
}
.ntl-title{
	font-size:1.15rem;font-weight:600;line-height:1.2;margin:0;
}
.ntl-title a{color:inherit;text-decoration:none}
.ntl-title a:hover{color:var(--ntl-accent-dk)}

.ntl-price{
	color:var(--ntl-accent-dk);
	font-size:.95rem;
	font-variant-numeric:tabular-nums;
}
.ntl-price del{opacity:.5;margin-right:.4em;font-weight:400}
.ntl-price ins{text-decoration:none;font-weight:600}

.ntl-cart{margin-top:auto;padding-top:16px}
.ntl-btn{
	display:flex;align-items:center;justify-content:center;gap:.5em;
	width:100%;
	background:var(--ntl-ink);color:#fff;
	padding:.95em 1.2em;
	font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
	text-decoration:none;border:none;cursor:pointer;
	transition:background .3s ease;
}
.ntl-btn:hover{background:var(--ntl-accent-dk);color:#fff}
.ntl-btn svg{width:15px;height:15px;flex:none}
.ntl-btn.added::after{content:"✓";margin-left:.4em}
.ntl-btn.loading{opacity:.7}

@media(max-width:900px){
	.ntl-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
	.ntl-grid{grid-template-columns:1fr 1fr}
}