/* [amulet_featured_products] shortcode styles.
 * Tokens match the shared gold/cream/espresso palette used by
 * latest-articles.css / about-addition.css (see DESIGN.md).
 */
.afp-wrap{
	--afp-accent:#B86B0B;
	--afp-accent-2:#C9A573;
	--afp-ink:#231508;
	--afp-ink-soft:#6b5b4a;
	--afp-cream:#FFFCF2;
	--afp-line:#e9ddc9;
	font-family:"Manrope",sans-serif;
}
html[lang="th"] .afp-wrap{font-family:"IBM Plex Sans Thai",sans-serif;}

.afp-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:20px;
}

.afp-card{
	background:var(--afp-cream);
	border:1px solid var(--afp-line);
	border-radius:12px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	transition:transform .2s ease,box-shadow .2s ease;
}
.afp-card:hover{
	transform:translateY(-4px);
	box-shadow:0 12px 26px rgba(35,21,8,.14);
}

.afp-gallery{background:#fff;}

.afp-main-img{
	position:relative;
	display:block;
	aspect-ratio:1/1;
	overflow:hidden;
	background:#f4efe2;
}
.afp-main-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .3s ease;
}
.afp-card:hover .afp-main-img img{transform:scale(1.04);}

.afp-badge{
	position:absolute;
	left:10px;
	top:10px;
	z-index:1;
	background:var(--afp-accent);
	color:#fff;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.05em;
	text-transform:uppercase;
	padding:4px 9px;
	border-radius:20px;
}

.afp-thumbs{
	display:flex;
	gap:6px;
	padding:8px;
	border-top:1px solid var(--afp-line);
}
/* Scoped under .afp-wrap (not just .afp-thumb) so this beats Elementor's
 * global kit CSS (".elementor-kit-9117 button {...}", higher specificity
 * than a bare class) which otherwise paints every <button> - including these
 * thumbnails - with the site's accent color and default padding when the
 * shortcode is placed inside an Elementor-built page. */
.afp-wrap .afp-thumb{
	flex:1;
	max-width:52px;
	aspect-ratio:1/1;
	padding:0;
	border:2px solid transparent;
	border-radius:6px;
	overflow:hidden;
	background:none;
	cursor:pointer;
	line-height:0;
}
.afp-wrap .afp-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	opacity:.65;
	transition:opacity .15s ease;
}
.afp-wrap .afp-thumb:hover img{opacity:1;}
.afp-wrap .afp-thumb.is-active{border-color:var(--afp-accent);}
.afp-wrap .afp-thumb.is-active img{opacity:1;}

.afp-body{
	padding:14px 16px 16px;
	display:flex;
	flex-direction:column;
	gap:6px;
	flex:1;
}
.afp-title{margin:0;font-size:14.5px;font-weight:600;line-height:1.35;}
.afp-title a{
	color:var(--afp-ink);
	text-decoration:none;
	display:-webkit-box;
	-webkit-line-clamp:2;
	line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.afp-title a:hover{color:var(--afp-accent);}

.afp-price{font-size:16px;font-weight:700;color:var(--afp-accent);}

.afp-btn{
	margin-top:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	background:var(--afp-ink);
	color:var(--afp-cream);
	font-size:12.5px;
	font-weight:600;
	text-decoration:none;
	padding:9px 0;
	border-radius:8px;
	transition:background .18s ease;
}
.afp-btn:hover{background:var(--afp-accent);color:#fff;}

@media (max-width:480px){
	.afp-grid{grid-template-columns:1fr 1fr;gap:12px;}
}